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

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

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

 より良いタイポグラフィのための知られざる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
927c73032f5858d8cab8f4b0513c4de8?s=48 motoy3d
1
140
1741a7877b6ff93bf29af4d11c2c895e?s=48 ryan403
0
150
A84b3c763c9c543069b7c02551e2720e?s=48 yuyamada
6
1.4k
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
3
310
676954675cda206b7baae939a82a8ef4?s=48 kenchan
3
1.3k
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
0
410
0ece01ad1513ae4ec0cdb062f9c3e6d8?s=48 pacocat
1
150
4e7f712e4bba241f579d3dc0eaf130d4?s=48 mito201
2
110
A5fed8c15d016c2a42d7d9f830326045?s=48 takuros
2
1.3k
2b0404a5db1a74f01bf3bf94d142e28c?s=48 alexzhukovich
0
100
44b799f91cc48e38c5fe9f5d9c5ecc61?s=48 takaichi00
0
590
5e25aec60358948cd53cfcdfd3714c6b?s=48 weblyzard
1
2.3k

Featured

See All Featured
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
700
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
334
29k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
403
20k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
653
120k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
247
21k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
504
37k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
777
200k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
591
210k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k

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ʣ