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
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
140
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
810
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
280
エラーとアクセシビリティ
schktjm
0
1k
ガチな登山用デバイスからこんにちは
halka
1
220
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
210
[RSJ25] Feasible RAG: Hierarchical Multimodal Retrieval with Feasibility-Aware Embodied Memory for Mobile Manipulation
keio_smilab
PRO
0
110
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
250
研究開発と製品開発、両利きのロボティクス
youtalk
1
480
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
130
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Automating Front-end Workflow
addyosmani
1370
200k
How GitHub (no longer) Works
holman
315
140k
Code Review Best Practice
trishagee
70
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Producing Creativity
orderedlist
PRO
347
40k
Code Reviewing Like a Champion
maltzj
525
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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ʣ