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
プロダクトデザインは子育て/Product design is parenting
medley
0
350
Sociotechnical design for software and human systems
xinyao
2
520
UIをもたらすコンテクストの考察
securecat
9
2.6k
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
360
Designing and Automating Component Specifications
nathanacurtis
2
110
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
330
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
190
Ubie Vitalsの取り組み紹介
8845musign
0
280
WHAT ARE ME?
takuro_nakajima
PRO
0
1.6k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
610
PRDがデザインプロセスを高速化した話
tooomo
1
430
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
620
Featured
See All Featured
Thoughts on Productivity
jonyablonski
60
3.9k
The Mythical Team-Month
searls
217
42k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
It's Worth the Effort
3n
180
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
KATA
mclloyd
16
12k
Six Lessons from altMBA
skipperchong
22
3k
The Language of Interfaces
destraynor
151
23k
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 }]