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

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

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

 より良いタイポグラフィのための知られざる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
僕の Microsoft Teams (+α) 便利技紹介 2022年春
54bcc1069d75636cc735e72877dd30ec?s=48 taichinakamura
0
2k
We’re all on the path of growth 🌱
D16bc1f94b17ddc794c2dfb48ef59456?s=48 mosky
1
350
AWSの基礎を学ぼうで学んだ9種類のDBを勝手にふりかえる
6395e3c01eccba987502884a2e40b381?s=48 98lerr
1
700
シビックテックとコミュニティ
20dd6ed6aa3cf68c2eabe56360512808?s=48 halsk
1
600
失敗しない条件付きアクセス Season 3
4eaba340fe3f9ea2cede1ef091dac3fb?s=48 sophiakunii
0
1.1k
【OCHaCafe#5】その Pod 突然落ちても大丈夫ですか？
B2ec9cc63288622b90b772a0ab71adc2?s=48 k6s4i53rx
2
110
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか？ / SRE NEXT 2022
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
13
6.6k
~スタートアップの人たちに捧ぐ~ 監視再入門 in AWS
Bf5ee9059859ed5d855b5ff4680e63e2?s=48 track3jyo
PRO
30
8.1k
エンジニアインターンの採用〜実際の開発への関与について for EM meetup#10
4c5769c58c5b504cd196dbc51d1d3858?s=48 dmiyamoto
1
250
THETA Xの登場はジオ業界を変えるか？
5314ec2302336bf68c95bdb5b1476227?s=48 furuhashilab
0
150
様々な現場のPower Platform ～小さなエンジニアの奮闘記～
39adbc0cddb8c0ea8470c80248e9e71b?s=48 hyodol2513
0
1.6k
ニフティでSRE推進活動を始めて取り組んできたこと
374e82d9428869942bed1de094a7ca95?s=48 niftycorp
2
140

Featured

See All Featured
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
3.9k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.3k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
125
8.5k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Put a Button on it: Removing Barriers to Going Fast.
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.3k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
6.9k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.5k

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ʣ