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
Web 組版の課題とその解法
Search
Yamato Iizuka
February 18, 2024
Design
0
260
Web 組版の課題とその解法
文字のLT会にて、組版ライブラリ「Palt Typesetting」をどのような課題意識を持って制作したのか、デモも交えて紹介させていただきました。
Yamato Iizuka
February 18, 2024
Tweet
Share
Other Decks in Design
See All in Design
sachi_y_portfolio
sachi337
0
370
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
「UXとUIの違い」v2
shirasu3
0
120
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
300
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
株式会社Muture_ソーシャル推進事業
muture
PRO
0
100
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
180
CMS管理画面のアクセシビリティ
magi1125
8
2.3k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
670
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
210
Bulletproof Design System with TypeScript
takanorip
6
3.7k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Navigating Team Friction
lara
187
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
671
58k
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf 2023
tenderlove
30
1.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
Web ൛ͷ՝ ͱͦͷղ ๏ ൧௩େ ʢ͍͍͔ͮ·ͱʣ
0 . ࣗݾ հ
൧௩େ ʢ͍͍͔ͮ·ͱʣ ओʹฏ໘ͷσβΠϯ ʢάϥϑΟ οΫʗWebʗUIʣ ͱ ϑϩϯ τΤϯ υͷΤϯδχΞϦϯάͰੜܭΛཱ͍ͯͯΔɻ ൛ϥΠϒϥϦ
ʮPalt Typesettingʯ ͷ࡞ऀɻ 1993ɺ ಢݝੜ·Εɻ Ԭຊ݈σβΠϯࣄॴʹॴଐɻ
Palt Typesetting ൛ػೳΦϑ
Palt Typesetting ൛ػೳΦϯ
1 . ߦ ଗ͑ʹ͓͚Δ՝
ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Web ͷಛҟੑ
ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Ҿ༻ݩ ɿ Notion – The next gen
of notes & docs (https://www.notion.so/product/docs/) Web ͷಛҟੑ
ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Ҿ༻ݩ ɿ Notion – ࣍ੈͷϝϞ & υΩϡϝ
ϯ τ (https://www.notion.so/ja-jp/product/docs) Web ͷಛҟੑ
ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Web ͷಛҟੑ Ҿ༻ݩ ɿ Notion – The
next gen of notes & docs (https://www.notion.so/product/docs/), Notion – ࣍ੈͷϝϞ & υΩϡϝ ϯ τ (https://www.notion.so/ja-jp/product/docs)
ελΠϦϯάΛڞ ௨Խͯ͠ӡ ༻Λγϯϓϧʹ͍ͨ͠ ʢ ࣮ଆͷؾ࣋ͪ ʣ The Intl.Segmenter object enables
locale-sensitive text segmentation, enabling you to get meaningful items from a string. English p { text-align: left; /* ࠨଗ͑ */ } ͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰఈʹྫྷͨ͞Λͭ੨͍ͦΒɺ ͏ͭ͘ ͍͠Ͱ০ΒΕͨϞϦʔΦࢢɺ ߫֎ͷ͗ Β͗Βͻ͔Δͷɻ ຊޠ
ӳ ޠࠨ ଗ͑ʹɺ ຊ ޠ྆ ଗ͑ʹ͍ͨ͠ ʢ σβΠφʔଆͷؾ࣋ͪ ʣ
.en { text-align: left; /* ࠨଗ͑ */ } .jp { text-align: justify; /* ྆ଗ͑ */ } ͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰ ఈʹྫྷͨ͞Λͭ ੨͍ͦΒɺ ͏ͭ͘ ͍͠Ͱ ০ΒΕͨϞϦʔΦࢢ ɺ ߫ ֎ͷ͗Β͗Βͻ͔Δ ͷɻ ຊޠ The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items from a string. English
εϚϗͳͲͷ ڱ͍ը໘Ͱൃੜ .jp { text-align: justify; /* ྆ଗ͑ */ }
iF DESIGN AWARD ɺ GOOD DESIGN AWARD ɺ Red Dot Design Award ͳͲडଟɻ GOOD DESIGN AWARD৹ࠪһɻ ຊޠʁ ຊ ޠΛ྆ ଗ͑ʹ͍͕ͨ͠ʜ ʢ σβΠφʔଆͷؾ࣋ͪ ʣ
࣮ Apple ྆ଗ͍͑ͬͯͳ͍ Ҿ༻ݩ ɿ Legal - ιϑ τΣΞϥΠηϯεܖ -
Apple (https://www.apple.com/jp/legal/sla/)
ӳ ޠͷΑ͏ʹຊ ޠΛΉ ʮߦଗ͑ʹ͓͚Δ՝ʯ ղ๏
͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰఈʹྫྷͨ͞Λͭ੨͍ͦΒɺ ͏ͭ͘ ͍͠Ͱ০ΒΕͨϞϦʔΦࢢɺ ߫֎ͷ͗ Β͗Βͻ͔Δͷɻ ຊޠ The Intl.Segmenter
object enables locale-sensitive text segmentation, enabling you to get meaningful items from a string. English ௨ৗͷࠨଗ͑
͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰఈʹྫྷͨ͞Λͭ੨͍ͦΒɺ ͏ͭ͘ ͍͠Ͱ০ΒΕͨϞϦʔΦࢢɺ ߫֎ͷ͗Β͗Βͻ͔Δͷɻ ຊޠ The Intl.Segmenter object
enables locale-sensitive text segmentation, enabling you to get meaningful items from a string. English ӳޠͷΑ͏ʹຊޠΛΉ
͋ͷʗΠʔϋ τʔϰΥʗͷʗ͖͢ʗͱ͓ͬͨʗ෩ʗɺ ʗ ՆʗͰʗఈʗʹʗྫྷͨ͞ʗΛʗͭʗ੨͍ʗͦΒ ӳޠͷΑ͏ʹຊޠΛΉ ʹ ܗଶૉղੳʹ͔͚ͯจΛ୯ޠʹׂ͠ɺ վߦҐஔΛϒϥβʹ͑Δ ~~~~~~~~~~
Ωʔϫʔ υݕࡧͳͲͰΘΕΔɺ ൺֱతલ͔Β͋Δٕज़ ͋ͷʗΠʔϋ τʔϰΥʗͷʗ͖͢ʗͱ͓ͬͨʗ෩ʗɺ ʗ ՆʗͰʗఈʗʹʗྫྷͨ͞ʗΛʗͭʗ੨͍ʗͦΒ ӳޠͷΑ͏ʹຊޠΛΉ ʹ ܗଶૉղੳʹ͔͚ͯจΛ୯ޠʹׂ͠ɺ
վߦҐஔΛϒϥβʹ͑Δ ~~~~~~~~~~
2 . Ԥ ࠞ ২ʹ͓͚Δ՝
Web ൛ʹ͓͚Δٖࣅࠞ২ body { font-family: Helvetica, "Hiragino Sans", sans-selif; }
~~~~~~~~~ ~~~~~~~~~~~~~~~ ӳ ຊޠ ʢ͜ͷྫͰώϥΪϊ֯ΰʣ
Adobe ܥιϑ τͷ ʮ߹ϑΥϯ τʯ ػೳ ɾ Ԥจͷॻମɺ αΠζɺ ϕʔεϥΠϯΛௐ
Adobe ܥιϑ τͷ ʮ߹ϑΥϯ τʯ ػೳ ɾ Ԥจͷॻମɺ αΠζɺ ϕʔεϥΠϯΛௐ
จʗԤจॻମͷଠ͞ײ͕߹Θͳ͍ ~~~~~~
தΰγοΫ ʴ Aktiv Grotesk Light υΠπ͔Βདྷͨ Sweynheim ͱ Pannartz ͱ͍͏ೋਓ͕
ͪΐͬͱࡉ͍
υΠπ͔Βདྷͨ Sweynheim ͱ Pannartz ͱ͍͏ೋਓ͕ தΰγοΫ ʴ Aktiv Grotesk Regular
ؾ࣋ͪଠ͍
จʗԤจॻମͷจࣈ͕ؒ߹Θͳ͍ ~~~~~~
υΠπ͔Βདྷͨ Sweynheim ͱ Pannartz ͱ͍͏ೋਓ͕ τϥοΩϯά 0 ʗจϕλΈ Ԥจ͕٧·Γؾຯ
υΠπ͔Βདྷͨ S weynheim ͱ Pannar t z ͱ͍͏ೋਓ͕ τϥοΩϯά 150
ʗจπϝΈ Ԥจ͕։͖ؾຯ
ӳ ޠ ʢ·ͨຊ ޠ ʣ ʹ͚ͩ CSSΛͯΔ ʮԤࠞ২ʹ͓͚Δ՝ʯ ղ๏
υΠπ͔Βདྷͨ S weynheim ͱ Pannar t z ͱ͍͏ೋਓ͕ <p> υΠπ͔ΒདྷͨSweynheimͱ
Pannartzͱ͍͏ೋਓ͕ </p> HTML p { font-feature-settings: 'palt'; /* πϝΈ */ letter-spacing: 0.15em; /* τϥοΩϯά150 */ } CSS OUTPUT
υΠπ͔Βདྷͨ S weynheim ͱ Pannar t z ͱ͍͏ೋਓ͕ <p> υΠπ͔Βདྷͨ<latin>Sweynheim</latin>
ͱ<latin>Pannartz</latin>ͱ͍͏ೋਓ͕ </p> HTML OUTPUT p {... /* ڞ௨ελΠϧͦͷ·· */} latin { /* ͜͜ʹԤจͷελΠϧΛॻ͍͍ͯ͘ */ } CSS HTMLλάͰғ͏
υΠπ͔Βདྷͨ Sweynheimͱ Pannartzͱ͍͏ೋਓ͕ <p> υΠπ͔Βདྷͨ<latin>Sweynheim</latin> ͱ<latin>Pannartz</latin>ͱ͍͏ೋਓ͕ </p> HTML p {...
/* ڞ௨ελΠϧͦͷ·· */} latin { font-size: 105%; /* จࣈαΠζ105% */ vertical-align: -0.02em; /* ϕʔεϥΠϯ-2% */ -webkit-text-stroke: 0.01em; /* ଠΒͤ1% */ letter-spacing: 0.05em; /* τϥοΩϯά50 */ } CSS CSS OUTPUT ԤจͷελΠϧΛఆٛ
·ͱΊ
Web Ͱຊޠͷ྆ଗ͑Λ࠾༻͠ʹ͍͘έʔε͕͋Γɺ σβΠφʔϠΩϞΩ͍ͯ͠Δ ʢͣʣ → ӳޠͷΑ͏ͳ୯ޠ۠ΓͷվߦΛɺ ຊޠʹಋೖͯ͠ΈΑ͏ 1. ߦଗ͑ʹ͓͚Δ՝ !
จʗԤจͷϑΥϯ τΛΈ߹Θͤͨ࣌ʹɺ ԤจͷαΠζɺ ϕʔεϥΠϯɺ จࣈؒɺ ଠ͞ײΛௐ͍ͨ͠ → ԤจΛ HTML λάͰғͬͯɺ
CSSΛͯΑ͏ 2. Ԥࠞ২ʹ͓͚Δ՝ !
ࠓճղઆ ɾӳޠͷΑ͏ͳ୯ޠ۠ΓͰͷվߦ ɾԤจΛ HTML λάͰғ͏ ɾ࿈ଓ͢ΔېଇจࣈͷจࣈؒΛ 0 ʹ͢Δ ɾ࢛ΞΩεϖʔεͷࣗಈૠೖ ɾΧʔχϯάϧʔϧͷద༻
Palt Typesetting ϥΠϒϥϦ
ӳޠͷΑ͏ͳ ୯ޠ۠ΓͰͷվߦ ػೳΦϑ useWordBreak: false
ӳޠͷΑ͏ͳ ୯ޠ۠ΓͰͷվߦ ػೳΦϯ useWordBreak: true
ԤจΛ HTMLλάͰғ͏ ػೳΦϑ wrapLatin: false U
ԤจΛ HTMLλάͰғ͏ ػೳΦϯ wrapLatin: true U
࿈ଓ͢Δېଇจࣈ ʢμογϡɺ ܩઢͳͲʣ ͷ จࣈؒΛ 0 ʹ͢Δ ػೳΦϑ noSpaceBetweenNoBreaks: false
࿈ଓ͢Δېଇจࣈ ʢμογϡɺ ܩઢͳͲʣ ͷ จࣈؒΛ 0 ʹ͢Δ ػೳΦϯ noSpaceBetweenNoBreaks: true
࢛ΞΩεϖʔεͷ ࣗಈૠೖ ػೳΦϑ insertThinSpaces: false
࢛ΞΩεϖʔεͷ ࣗಈૠೖ insertThinSpaces: true ػೳΦϯ
Χʔχϯάϧʔϧͷ ద༻ ػೳΦϑ kerning: []
Χʔχϯάϧʔϧͷ ద༻ ػೳΦϯ kerning: [{ between: ['ඒ', '͠'], value: 60
},/* தུ */ { between: ['͢', 'ɻ '], value: -120 }]