Upgrade to Pro — share decks privately, control downloads, hide ads and more …

より良いタイポグラフィのための知られざるCSS

Takeru Suzuki
October 24, 2020
Technology
21
7.6k

 より良いタイポグラフィのための知られざるCSS

CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/

Takeru Suzuki

October 24, 2020
Tweet

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
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
200
Oracle Cloud Infrastructure：2024年12月度サービス・アップデート
oracle4engineer
PRO
1
430
Duckiedrone - 基於 Raspberry Pi 與 Python 的小型無人機專案介紹
piepie_tw
PRO
0
120
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
270
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
350
Agentic RAG with LangGraph
atsushii
0
100
3年でバックエンドエンジニアが5倍に増えても破綻しなかったアーキテクチャ そして、これから / Software architecture that scales even with a 5x increase in backend engineers in 3 years
euglena1215
11
4.2k
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
3
430
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.6k
20241220_S3 tablesの使い方を検証してみた
handy
4
830
20241218_マルチアカウント環境におけるIAM_Access_Analyzerによる権限管理.pdf
nrinetcom
PRO
3
140
SpiderPlus & Co. エンジニア向け会社紹介資料
spiderplus_cb
0
120

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Docker and Python
trallard
43
3.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
190
Music & Morning Musume
bryan
46
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Writing Fast Ruby
sferik
628
61k
Code Reviewing Like a Champion
maltzj
521
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Facilitating Awesome Meetings
lara
50
6.2k
A Tale of Four Properties
chriscoyier
157
23k

Transcript

  1. ླ໦ ৎ Α Γྑ͍λΠϙάϥϑ ΟͷͨΊͷ ஌ΒΕ͟Δ$44

  2. Χʔχϯά ʕɹάϦϑ͕શ֯෯ͷͱ͖͸ແޮʹ ʕɹάϦϑ͕ϓϩϙʔγϣφϧ෯ͷͱ͖͸༗ޮʹ font-kerning

  3. font-kerning: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */ font-kerning: normal; /* ΧʔχϯάΛద༻͢Δ */

    font-kerning: none; /* ΧʔχϯάΛద༻͠ͳ͍ */

  4. font-kerning: normal; font-kerning: none;

  5. body { font-kerning: none; /* ϖʔδશମͰແޮʹ */ } :lang(en) {

    font-kerning: normal; /* ԤจͰ͸༗ޮʹ */ } h1 { font-feature-settings: "palt" 1; font-kerning: normal; /* ϓϩϙʔγϣφϧϝτϦΫε͕༗ޮͳΒΧʔχϯά΋༗ޮʹ */ }

  6. 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;

  7. ໿෺ͷͿΒԼ͛ ʕɹे෼ͳϚʔδϯΛ֬อ͢Δ͜ͱ hanging-punctuation

  8. hanging-punctuation: none; /* ͿΒԼ͛ͳ͠ʢॳظ஋ʣ */ hanging-punctuation: first; /* ߦ಄Ҿ༻ූɾׅހ */

    hanging-punctuation: last; /* ߦ຤Ҿ༻ූɾׅހ */ hanging-punctuation: force-end; /* ߦ຤۟ಡ఺Λڧ੍ */ hanging-punctuation: allow-end; /* ߦ຤۟ಡ఺Λڐ༰ */

  9. hanging-punctuation: none; hanging-punctuation: allow-end;

  10. ϋΠϑωʔγϣϯ ʕɹԤจͷίϯςϯπͰ͸ࣗಈϋΠϑωʔγϣϯʹ ʕɹlangଐੑʹΑΔݴޠͷࢦఆΛ๨Εͣʹ hyphens

  11. hyphens: manual; /* ࢦఆͷҐஔͰϋΠϑωʔγϣϯʢॳظ஋ʣ */ hyphens: auto; /* ϒϥ΢βʔʹΑΔࣗಈϋΠϑωʔγϣϯ */

    hyphens: none; /* ϋΠϑωʔγϣϯ͠ͳ͍ */

  12. hyphens: manual; hyphens: auto;

  13. <html lang="en">

  14. վߦنଇʢېଇʣ ʕɹϒϥ΢βʹΑͬͯσϑΥϧτͷېଇ͕ҟͳΔ line-break

  15. line-break: auto; /* ϒϥ΢β͕ܾఆʢॳظ஋ʣ */ line-break: anywhere; /* ېଇͳ͠ */

    line-break: loose; /* ऑ͍ېଇ */ line-break: normal; /* ඪ४తͳېଇ */ line-break: strict; /* ڧ͍ېଇ */

  16. line-break: anywhere; line-break: loose; line-break: normal; line-break: strict;

  17. ૷০ઢͷଠ͞ ԼઢͷҐஔ ʕɹϦϯΫͳͲͷԼઢͷελΠϧ੍͕ޚՄೳʹ text-decoration-thickness text-underline-offset

  18. 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;

  19. text-decoration-thickness: auto; text-underline-offset: auto; text-decoration-thickness: 1px; text-underline-offset: 0.125em;

  20. ݍ఺ ʕɹे෼ͳߦؒΛ֬อ͢Δ͜ͱ ʕɹϑΥʔϧόοΫͷελΠϧΛ๨Εͣʹ text-emphasis

  21. text-emphasis: none; /* ॳظ஋ */ text-emphasis: dot; text-emphasis: open sesame;

    text-emphasis: "ˎ"; text-emphasis: "\25c6" #d70c19;

  22. text-emphasis: dot; text-emphasis: open sesame; text-emphasis: "ˎ"; text-emphasis: "\25c6" #d70c19;

  23. em { font-style: normal; font-weight: bold; /* σϑΥϧτͰ͸ϘʔϧυͰ */ }

    /* text-emphasisΛαϙʔτ͍ͯ͠Δ؀ڥͰ͸ݍ఺Ͱ */ @supports (text-emphasis: dot) { em { font-weight: inherit; text-emphasis: dot; } }

  24. ΑΓྑ͍λΠϙάϥϑΟͷͨΊͷ஌ΒΕ͟Δ$44 ೥݄೔ ླ໦ৎ UFSLFMKQ ϑΥϯτ ஜࢵΰγοΫ1SP#ʢϑΥϯτϫʔΫεʣ 5IF4BOT.POP$POEFOTFEʢ-VDBT'POUTʣ ΞΠίϯ 'POU"XFTPNFʢGPOUBXFTPNFDPNMJDFOTFʣ