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

Dc3f88b2c2c4210e3068d94ce7c25bf2?s=47 Takeru Suzuki
October 24, 2020
Technology
17
5.3k

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

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

Dc3f88b2c2c4210e3068d94ce7c25bf2?s=128

Takeru Suzuki

October 24, 2020
Tweet

Other Decks in Technology

See All in Technology
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
220
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.1k
0d040d77cca56a9652d74db65bac0245?s=48 elasticanz
0
130
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
240
89a0966b0f29e90ebf602a77e1349a6b?s=48 alexanderbyndyu
0
240
2dfb65b481d9e382551b76c7cb0b7c98?s=48 ishiagme
1
190
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
2k
Afa915e2be5df7c64a848f078b62abb1?s=48 kg0r0
0
200
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
240
143f88e8c2b2a1123e87c81d9bbefa02?s=48 dongjin
1
430
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
260

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.3k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
15k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
773
190k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
56
6.2k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.4k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
36k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
16k

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ʣ