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

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

Transcript

1. ླ໦
   ৎ Α Γྑ͍λΠϙάϥϑ ΟͷͨΊͷ ஌ΒΕ͟Δ$44
2. Χʔχϯά ʕɹάϦϑ͕શ֯෯ͷͱ͖͸ແޮʹ ʕɹάϦϑ͕ϓϩϙʔγϣφϧ෯ͷͱ͖͸༗ޮʹ font-kerning
3. font-kerning: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */ font-kerning: normal; /* ΧʔχϯάΛద༻͢Δ */ font-kerning: none; /* ΧʔχϯάΛద༻͠ͳ͍ */
4. font-kerning: normal; font-kerning: none;
5. body { font-kerning: none; /* ϖʔδશମͰແޮʹ */ } :lang(en) { font-kerning: normal; /* ԤจͰ͸༗ޮʹ */ } h1 { font-feature-settings: "palt" 1; font-kerning: normal; /* ϓϩϙʔγϣφϧϝτϦΫε͕༗ޮͳΒΧʔχϯά΋༗ޮʹ */ }
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;
7. ໿෺ͷͿΒԼ͛ ʕɹे෼ͳϚʔδϯΛ֬อ͢Δ͜ͱ hanging-punctuation
8. hanging-punctuation: none; /* ͿΒԼ͛ͳ͠ʢॳظ஋ʣ */ hanging-punctuation: first; /* ߦ಄Ҿ༻ූɾׅހ */ hanging-punctuation: last; /* ߦ຤Ҿ༻ූɾׅހ */ hanging-punctuation: force-end; /* ߦ຤۟ಡ఺Λڧ੍ */ hanging-punctuation: allow-end; /* ߦ຤۟ಡ఺Λڐ༰ */
9. hanging-punctuation: none; hanging-punctuation: allow-end;
10. ϋΠϑωʔγϣϯ ʕɹԤจͷίϯςϯπͰ͸ࣗಈϋΠϑωʔγϣϯʹ ʕɹlangଐੑʹΑΔݴޠͷࢦఆΛ๨Εͣʹ hyphens
11. hyphens: manual; /* ࢦఆͷҐஔͰϋΠϑωʔγϣϯʢॳظ஋ʣ */ hyphens: auto; /* ϒϥ΢βʔʹΑΔࣗಈϋΠϑωʔγϣϯ */ hyphens: none; /* ϋΠϑωʔγϣϯ͠ͳ͍ */
12. hyphens: manual; hyphens: auto;
13. <html lang="en">
14. վߦنଇʢېଇʣ ʕɹϒϥ΢βʹΑͬͯσϑΥϧτͷېଇ͕ҟͳΔ line-break
15. line-break: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */ line-break: anywhere; /* ېଇͳ͠ */ line-break: loose; /* ऑ͍ېଇ */ line-break: normal; /* ඪ४తͳېଇ */ line-break: strict; /* ڧ͍ېଇ */
16. line-break: anywhere; line-break: loose; line-break: normal; line-break: strict;
17. ૷০ઢͷଠ͞ ԼઢͷҐஔ ʕɹϦϯΫͳͲͷԼઢͷελΠϧ੍͕ޚՄೳʹ text-decoration-thickness text-underline-offset
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;
19. text-decoration-thickness: auto; text-underline-offset: auto; text-decoration-thickness: 1px; text-underline-offset: 0.125em;
20. ݍ఺ ʕɹे෼ͳߦؒΛ֬อ͢Δ͜ͱ ʕɹϑΥʔϧόοΫͷελΠϧΛ๨Εͣʹ text-emphasis
21. text-emphasis: none; /* ॳظ஋ */ text-emphasis: dot; text-emphasis: open sesame; text-emphasis: "ˎ"; text-emphasis: "\25c6" #d70c19;
22. text-emphasis: dot; text-emphasis: open sesame; text-emphasis: "ˎ"; text-emphasis: "\25c6" #d70c19;
23. em { font-style: normal; font-weight: bold; /* σϑΥϧτͰ͸ϘʔϧυͰ */ } /* text-emphasisΛαϙʔτ͍ͯ͠Δ؀ڥͰ͸ݍ఺Ͱ */ @supports (text-emphasis: dot) { em { font-weight: inherit; text-emphasis: dot; } }
24. ΑΓྑ͍λΠϙάϥϑΟͷͨΊͷ஌ΒΕ͟Δ$44 ೥݄೔ ླ໦ৎ UFSLFMKQ ϑΥϯτ ஜࢵΰγοΫ
    1SP
    #ʢϑΥϯτϫʔΫεʣ 5IF4BOT
    .POP
    $POEFOTFEʢ-VDBT'POUTʣ ΞΠίϯ 'POU
    "XFTPNFʢGPOUBXFTPNFDPNMJDFOTFʣ