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
120
Web 組版の課題とその解法
文字のLT会にて、組版ライブラリ「Palt Typesetting」をどのような課題意識を持って制作したのか、デモも交えて紹介させていただきました。
Yamato Iizuka
February 18, 2024
Tweet
Share
Other Decks in Design
See All in Design
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.3k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.9k
ホワイト化するこの世界の片隅に
hisayosky
0
150
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
460
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
160
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
240
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
670
root Design Partnership Policy
root_recruit
0
4.4k
UIをもたらすコンテクストの考察
securecat
9
2.6k
decksh object reference
ajstarks
2
930
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
350
Ubie Vitalsの取り組み紹介
8845musign
0
270
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
33
12k
Atom: Resistance is Futile
akmur
260
25k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
GitHub's CSS Performance
jonrohan
1025
450k
What the flash - Photography Introduction
edds
64
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Designing the Hi-DPI Web
ddemaree
276
33k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Web Components: a chance to create the future
zenorocha
306
41k
A better future with KSS
kneath
231
16k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
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 }]