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.8k
より良いタイポグラフィのための知られざる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
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Autify Company Deck
autifyhq
2
44k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
An introduction to Claude Code SDK
choplin
2
940
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
940
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
280
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
無理しない AI 活用サービス / #jazug
koudaiii
0
100
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimizing for Happiness
mojombo
379
70k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why Our Code Smells
bkeepers
PRO
337
57k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
For a Future-Friendly Web
brad_frost
179
9.8k
A designer walks into a library…
pauljervisheath
207
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ʣ