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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Takeru Suzuki Takeru Suzuki
October 24, 2020
Technology
8.1k
21

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

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

Avatar for Takeru Suzuki

Takeru Suzuki

October 24, 2020

More Decks by Takeru Suzuki

See All by Takeru Suzuki
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
Avatar for Takeru Suzuki terkel
0
1.7k

Other Decks in Technology

See All in Technology
plamo-3-translateの開発
Avatar for Preferred Networks pfn
PRO
0
210
ソフトウェアアーキテクチャ研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
1k
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
11
3k
WEBフロントエンド研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
760
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
110k
エンタープライズデータへ安全につなぐ Production-ready なエージェント設計 ― AI × MCP リファレンスアーキテクチャ ― #AIDevDay
Avatar for CData Software Japan cdataj
1
340
データ組織の転換期 一足飛びしない段階的戦略
Avatar for Tech Leverages leveragestech
PRO
0
120
13年運用タイトルのサーバーサイドが辿り着いた現在地 ― モンスターストライクにおける技術・組織・AI活用から得た知見
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
340
もう一度考える SRE チームの作り方・育て方 / Rethinking SRE #1: Building and Growing SRE Teams
Avatar for rrreeeyyy rrreeeyyy
1
150
コンポーネント名には何を含めるべきなのか？ / what-should-be-included-in-component-names
Avatar for airRnot airrnot1106
0
190
PLaMo 3.0 Primeの事後学習
Avatar for Preferred Networks pfn
PRO
0
200
Power Automateアップデート情報
Avatar for MiyakeMito miyakemito
0
290

Featured

See All Featured
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
650
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.7k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k

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ʣ