より良いタイポグラフィのための知られざるCSS

CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/

Transcript

1. ླ໦ ৎ
   Α
   Γྑ͍λΠϙάϥϑ
   ΟͷͨΊͷ
   ஌ΒΕ͟Δ$44
   

   View Slide

2. Χʔχϯά
   ʕɹάϦϑ͕શ֯෯ͷͱ͖͸ແޮʹ
   ʕɹάϦϑ͕ϓϩϙʔγϣφϧ෯ͷͱ͖͸༗ޮʹ
   font-kerning
   

   View Slide

3. font-kerning: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */
   font-kerning: normal; /* ΧʔχϯάΛద༻͢Δ */
   font-kerning: none; /* ΧʔχϯάΛద༻͠ͳ͍ */
   

   View Slide

4. font-kerning: normal;
   font-kerning: none;
   

   View Slide

5. body {
   font-kerning: none; /* ϖʔδશମͰແޮʹ */
   }
   :lang(en) {
   font-kerning: normal; /* ԤจͰ͸༗ޮʹ */
   }
   h1 {
   font-feature-settings: "palt" 1;
   font-kerning: normal;
   /* ϓϩϙʔγϣφϧϝτϦΫε͕༗ޮͳΒΧʔχϯά΋༗ޮʹ */
   }
   

   View Slide

6. font-feature-settings: normal;
   font-kerning: none;
   /* σϑΥϧτ */
   font-feature-settings: normal;
   font-kerning: normal;
   font-feature-settings: "palt" 1;
   font-kerning: none;
   font-feature-settings: "palt" 1;
   font-kerning: normal;
   

   View Slide

7. ໿෺ͷͿΒԼ͛
   ʕɹे෼ͳϚʔδϯΛ֬อ͢Δ͜ͱ
   hanging-punctuation
   

   View Slide

8. hanging-punctuation: none; /* ͿΒԼ͛ͳ͠ʢॳظ஋ʣ */
   hanging-punctuation: first; /* ߦ಄Ҿ༻ූɾׅހ */
   hanging-punctuation: last; /* ߦ຤Ҿ༻ූɾׅހ */
   hanging-punctuation: force-end; /* ߦ຤۟ಡ఺Λڧ੍ */
   hanging-punctuation: allow-end; /* ߦ຤۟ಡ఺Λڐ༰ */
   

   View Slide

9. hanging-punctuation: none;
   hanging-punctuation: allow-end;
   

   View Slide

10. ϋΠϑωʔγϣϯ
    ʕɹԤจͷίϯςϯπͰ͸ࣗಈϋΠϑωʔγϣϯʹ
    ʕɹlangଐੑʹΑΔݴޠͷࢦఆΛ๨Εͣʹ
    hyphens
    

    View Slide

11. hyphens: manual; /* ࢦఆͷҐஔͰϋΠϑωʔγϣϯʢॳظ஋ʣ */
    hyphens: auto; /* ϒϥ΢βʔʹΑΔࣗಈϋΠϑωʔγϣϯ */
    hyphens: none; /* ϋΠϑωʔγϣϯ͠ͳ͍ */
    

    View Slide

12. hyphens: manual;
    hyphens: auto;
    

    View Slide

13. 
    

    View Slide

14. վߦنଇʢېଇʣ
    ʕɹϒϥ΢βʹΑͬͯσϑΥϧτͷېଇ͕ҟͳΔ
    line-break
    

    View Slide

15. line-break: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */
    line-break: anywhere; /* ېଇͳ͠ */
    line-break: loose; /* ऑ͍ېଇ */
    line-break: normal; /* ඪ४తͳېଇ */
    line-break: strict; /* ڧ͍ېଇ */
    

    View Slide

16. line-break: anywhere;
    line-break: loose;
    line-break: normal;
    line-break: strict;
    

    View Slide

17. ૷০ઢͷଠ͞
    ԼઢͷҐஔ
    ʕɹϦϯΫͳͲͷԼઢͷελΠϧ੍͕ޚՄೳʹ
    text-decoration-thickness
    text-underline-offset
    

    View Slide

18. text-decoration-thickness: auto; /* ॳظ஋ */
    text-decoration-thickness: 1px;
    text-decoration-thickness: 0.05em;
    text-underline-offset: auto; /* ॳظ஋ */
    text-underline-offset: 2px;
    text-underline-offset: 0.125em;
    

    View Slide

19. text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.125em;
    

    View Slide

20. ݍ఺
    ʕɹे෼ͳߦؒΛ֬อ͢Δ͜ͱ
    ʕɹϑΥʔϧόοΫͷελΠϧΛ๨Εͣʹ
    text-emphasis
    

    View Slide

21. text-emphasis: none; /* ॳظ஋ */
    text-emphasis: dot;
    text-emphasis: open sesame;
    text-emphasis: "ˎ";
    text-emphasis: "\25c6" #d70c19;
    

    View Slide

22. text-emphasis: dot;
    text-emphasis: open sesame;
    text-emphasis: "ˎ";
    text-emphasis: "\25c6" #d70c19;
    

    View Slide

23. em {
    font-style: normal;
    font-weight: bold; /* σϑΥϧτͰ͸ϘʔϧυͰ */
    }
    /* text-emphasisΛαϙʔτ͍ͯ͠Δ؀ڥͰ͸ݍ఺Ͱ */
    @supports (text-emphasis: dot) {
    em {
    font-weight: inherit;
    text-emphasis: dot;
    }
    }
    

    View Slide

24. ΑΓྑ͍λΠϙάϥϑΟͷͨΊͷ஌ΒΕ͟Δ$44
    ೥݄೔
    ླ໦ৎ
    UFSLFMKQ
    ϑΥϯτ
    ஜࢵΰγοΫ1SP#ʢϑΥϯτϫʔΫεʣ
    5IF4BOT.POP$POEFOTFEʢ-VDBT'POUTʣ
    ΞΠίϯ
    'POU"XFTPNFʢGPOUBXFTPNFDPNMJDFOTFʣ
    

    View Slide