Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
より良いタイポグラフィのための知られざるCSS
Search
Takeru Suzuki
October 24, 2020
Technology
21
7.9k
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋
https://vivliostyle.connpass.com/event/189940/
Takeru Suzuki
October 24, 2020
Tweet
Share
More Decks by Takeru Suzuki
See All by Takeru Suzuki
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
1.6k
Other Decks in Technology
See All in Technology
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
420
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
230
incident_commander_demaecan__1_.pdf
demaecan
0
160
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
960
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.7k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
420
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
WEBサービスを成り立たせるAWSサービス
takano0131
1
180
Liquid AI Hackathon Tokyo プレゼン資料
aratako
0
110
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
260
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
BBQ
matthewcrist
89
9.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Speed Design
sergeychernyshev
32
1.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Agile that works and the tools we love
rasmusluckow
331
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
ླ ৎ Α Γྑ͍λΠϙάϥϑ ΟͷͨΊͷ ΒΕ͟Δ$44
Χʔχϯά ʕɹάϦϑ͕શ֯෯ͷͱ͖ແޮʹ ʕɹάϦϑ͕ϓϩϙʔγϣφϧ෯ͷͱ͖༗ޮʹ font-kerning
font-kerning: auto; /* ϒϥβ͕ܾఆʢॳظʣ */ font-kerning: normal; /* ΧʔχϯάΛద༻͢Δ */
font-kerning: none; /* ΧʔχϯάΛద༻͠ͳ͍ */
font-kerning: normal; font-kerning: none;
body { font-kerning: none; /* ϖʔδશମͰແޮʹ */ } :lang(en) {
font-kerning: normal; /* ԤจͰ༗ޮʹ */ } h1 { font-feature-settings: "palt" 1; font-kerning: normal; /* ϓϩϙʔγϣφϧϝτϦΫε͕༗ޮͳΒΧʔχϯά༗ޮʹ */ }
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;
ͷͿΒԼ͛ ʕɹेͳϚʔδϯΛ֬อ͢Δ͜ͱ hanging-punctuation
hanging-punctuation: none; /* ͿΒԼ͛ͳ͠ʢॳظʣ */ hanging-punctuation: first; /* ߦ಄Ҿ༻ූɾׅހ */
hanging-punctuation: last; /* ߦҾ༻ූɾׅހ */ hanging-punctuation: force-end; /* ߦ۟ಡΛڧ੍ */ hanging-punctuation: allow-end; /* ߦ۟ಡΛڐ༰ */
hanging-punctuation: none; hanging-punctuation: allow-end;
ϋΠϑωʔγϣϯ ʕɹԤจͷίϯςϯπͰࣗಈϋΠϑωʔγϣϯʹ ʕɹlangଐੑʹΑΔݴޠͷࢦఆΛΕͣʹ hyphens
hyphens: manual; /* ࢦఆͷҐஔͰϋΠϑωʔγϣϯʢॳظʣ */ hyphens: auto; /* ϒϥβʔʹΑΔࣗಈϋΠϑωʔγϣϯ */
hyphens: none; /* ϋΠϑωʔγϣϯ͠ͳ͍ */
hyphens: manual; hyphens: auto;
<html lang="en">
վߦنଇʢېଇʣ ʕɹϒϥβʹΑͬͯσϑΥϧτͷېଇ͕ҟͳΔ line-break
line-break: auto; /* ϒϥβ͕ܾఆʢॳظʣ */ line-break: anywhere; /* ېଇͳ͠ */
line-break: loose; /* ऑ͍ېଇ */ line-break: normal; /* ඪ४తͳېଇ */ line-break: strict; /* ڧ͍ېଇ */
line-break: anywhere; line-break: loose; line-break: normal; line-break: strict;
০ઢͷଠ͞ ԼઢͷҐஔ ʕɹϦϯΫͳͲͷԼઢͷελΠϧ੍͕ޚՄೳʹ text-decoration-thickness text-underline-offset
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;
text-decoration-thickness: auto; text-underline-offset: auto; text-decoration-thickness: 1px; text-underline-offset: 0.125em;
ݍ ʕɹेͳߦؒΛ֬อ͢Δ͜ͱ ʕɹϑΥʔϧόοΫͷελΠϧΛΕͣʹ text-emphasis
text-emphasis: none; /* ॳظ */ text-emphasis: dot; text-emphasis: open sesame;
text-emphasis: "ˎ"; text-emphasis: "\25c6" #d70c19;
text-emphasis: dot; text-emphasis: open sesame; text-emphasis: "ˎ"; text-emphasis: "\25c6" #d70c19;
em { font-style: normal; font-weight: bold; /* σϑΥϧτͰϘʔϧυͰ */ }
/* text-emphasisΛαϙʔτ͍ͯ͠ΔڥͰݍͰ */ @supports (text-emphasis: dot) { em { font-weight: inherit; text-emphasis: dot; } }
ΑΓྑ͍λΠϙάϥϑΟͷͨΊͷΒΕ͟Δ$44 ݄ ླৎ UFSLFMKQ ϑΥϯτ ஜࢵΰγοΫ1SP#ʢϑΥϯτϫʔΫεʣ 5IF4BOT.POP$POEFOTFEʢ-VDBT'POUTʣ ΞΠίϯ 'POU"XFTPNFʢGPOUBXFTPNFDPNMJDFOTFʣ