Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Dc3f88b2c2c4210e3068d94ce7c25bf2?s=47 Takeru Suzuki
October 24, 2020
Technology
18
6.1k

 より良いタイポグラフィのための知られざる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
6d161fe47f36ac295189c3b6a0db2a9a?s=48 masahirokawahara
0
290
00101a1274d1f92977f4e442ef73be86?s=48 ahana
0
100
D8d463da5ab4a99265ffc1d12e76cbc9?s=48 sagara
1
400
0350fb935be160186cd72472c9e5543b?s=48 hayaosuzuki
0
130
325ce6fcd0a74ff78990b8632817da55?s=48 yukihirochiba
0
210
744424a2b6307140bf794ffb00ce5ec1?s=48 yujioshima
1
540
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
150
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
2.4k
8a1af77e438c19487b710e1f0ec95df3?s=48 ushigai
0
300
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
0
440
9513a9cc8ee9b5f2a8b4a5a914da8411?s=48 _awache
0
140
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
720

Featured

See All Featured
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
11k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.8k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
750
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
8.9k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.1k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
122
8.2k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
190
14k

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ʣ