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.5k
Other Decks in Technology
See All in Technology
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
120
GopherCon Tour 概略
logica0419
2
170
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
450
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
830
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
260
KMP の Swift export
kokihirokawa
0
310
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
830
Windows で省エネ
murachiakira
0
160
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
4
170
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Invisible Side of Design
smashingmag
301
51k
Scaling GitHub
holman
463
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Thoughts on Productivity
jonyablonski
70
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Side Projects
sachag
455
43k
Building Adaptive Systems
keathley
43
2.8k
Music & Morning Musume
bryan
46
6.8k
A designer walks into a library…
pauljervisheath
208
24k
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ʣ