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.7k
より良いタイポグラフィのための知られざる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.4k
Other Decks in Technology
See All in Technology
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
140
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
260
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
140
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
700
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
130
The Future of SEO: The Impact of AI on Search
badams
0
180
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
500
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
250
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5.1k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
950
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Become a Pro
speakerdeck
PRO
26
5.1k
Unsuck your backbone
ammeep
669
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Your Own Lightsaber
phodgson
104
6.2k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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ʣ