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
150
Web 組版の課題とその解法
文字のLT会にて、組版ライブラリ「Palt Typesetting」をどのような課題意識を持って制作したのか、デモも交えて紹介させていただきました。
Yamato Iizuka
February 18, 2024
Tweet
Share
Other Decks in Design
See All in Design
Ubie Vitalsの取り組み紹介
8845musign
0
590
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
260
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
350
Sensitive Texter Storyboard
ctagulao98
0
160
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.2k
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
160
B/43プラスカードができるまで
putchomsmartbank
1
630
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
100
Information Architects: The Missing Link in Design Systems
soysaucechin
0
190
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9k
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
710
Featured
See All Featured
Side Projects
sachag
451
42k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Six Lessons from altMBA
skipperchong
24
3.2k
Infographics Made Easy
chrislema
238
18k
Music & Morning Musume
bryan
43
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
A Tale of Four Properties
chriscoyier
155
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Web Components: a chance to create the future
zenorocha
307
41k
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 }]