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
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
B/43プラスカードができるまで
putchomsmartbank
0
490
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
460
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
250
他人事じゃないWebアクセシビリティ入門
arihiro17
0
240
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.2k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
660
ウェブディレクターを救うBacklog
wattlaa
0
310
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
450
3D空間を扱うUI表現とユーザビリティ
akinen
0
470
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5k
UIをもたらすコンテクストの考察
securecat
9
2.6k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Agile that works and the tools we love
rasmusluckow
325
20k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
How to name files
jennybc
65
93k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
66
BBQ
matthewcrist
80
8.8k
Designing with Data
zakiwarfel
96
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Faster Mobile Websites
deanohume
300
30k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
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 }]