Web 組版の課題とその解法

文字のLT会にて、組版ライブラリ「Palt Typesetting」をどのような課題意識を持って制作したのか、デモも交えて紹介させていただきました。

Transcript

1. Web ૊ ൛ͷ՝ ୊ͱͦͷղ ๏ ൧௩େ࿨ ʢ͍͍͔ͮ΍·ͱʣ
2. 0 . ࣗݾ঺ հ
3. ൧௩େ࿨ ʢ͍͍͔ͮ΍·ͱʣ ओʹฏ໘ͷσβΠϯ ʢάϥϑΟ οΫʗWebʗUIʣ ͱ ϑϩϯ τΤϯ υͷΤϯδχΞϦϯάͰੜܭΛཱ͍ͯͯΔɻ ૊൛ϥΠϒϥϦ ʮPalt Typesettingʯ ͷ੡࡞ऀɻ 1993೥ɺ ಢ໦ݝੜ·Εɻ Ԭຊ݈σβΠϯࣄ຿ॴʹॴଐɻ
4. Palt Typesetting ૊൛ػೳΦϑ
5. Palt Typesetting ૊൛ػೳΦϯ
6. 1 . ߦ ଗ͑ʹ͓͚Δ՝ ୊
7. ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Web ͷಛҟੑ
8. ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Ҿ༻ݩ ɿ Notion – The next gen of notes & docs (https://www.notion.so/product/docs/) Web ͷಛҟੑ
9. ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Ҿ༻ݩ ɿ Notion – ࣍ੈ୅ͷϝϞ & υΩϡϝ ϯ τ (https://www.notion.so/ja-jp/product/docs) Web ͷಛҟੑ
10. ɾଟݴޠରԠ ɾ ϨεϙϯγϒରԠ Web ͷಛҟੑ Ҿ༻ݩ ɿ Notion – The next gen of notes & docs (https://www.notion.so/product/docs/), Notion – ࣍ੈ୅ͷϝϞ & υΩϡϝ ϯ τ (https://www.notion.so/ja-jp/product/docs)
11. ελΠϦϯάΛڞ ௨Խͯ͠ӡ ༻Λγϯϓϧʹ͍ͨ͠ ʢ ࣮૷ଆͷؾ࣋ͪ ʣ The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items from a string. English p { text-align: left; /* ࠨଗ͑ */ } ͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒɺ ͏ͭ͘ ͍͠৿Ͱ০ΒΕͨϞϦʔΦࢢɺ ߫֎ͷ͗ Β͗Βͻ͔Δ૲ͷ೾ɻ ೔ຊޠ
12. ӳ ޠ͸ࠨ ଗ͑ʹɺ ೔ຊ ޠ͸྆ ୺ ଗ͑ʹ͍ͨ͠ ʢ σβΠφʔଆͷؾ࣋ͪ ʣ .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
13. εϚϗͳͲͷ ڱ͍ը໘Ͱൃੜ .jp { text-align: justify; /* ྆୺ଗ͑ */ } iF DESIGN AWARD ɺ GOOD DESIGN AWARD ɺ Red Dot Design Award ͳͲड৆ଟ਺ɻ GOOD DESIGN AWARD৹ࠪһɻ ೔ຊޠʁ ೔ຊ ޠΛ྆ ୺ ଗ͑ʹ͍͕ͨ͠ʜ ʢ σβΠφʔଆͷؾ࣋ͪ ʣ
14. ࣮͸ Apple΋ ྆୺ଗ͑͸࢖͍ͬͯͳ͍ Ҿ༻ݩ ɿ Legal - ιϑ τ΢ΣΞϥΠηϯεܖ໿ - Apple (https://www.apple.com/jp/legal/sla/)
15. ӳ ޠͷΑ͏ʹ೔ຊ ޠΛ૊Ή ʮߦଗ͑ʹ͓͚Δ՝୊ʯ ղ๏
16. ͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒɺ ͏ͭ͘ ͍͠৿Ͱ০ΒΕͨϞϦʔΦࢢɺ ߫֎ͷ͗ Β͗Βͻ͔Δ૲ͷ೾ɻ ೔ຊޠ The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items from a string. English ௨ৗͷࠨଗ͑
17. ͋ͷΠʔϋ τʔϰΥͷ͖͢ͱ͓ͬͨ෩ɺ ՆͰ΋ఈʹྫྷͨ͞Λ΋ͭ੨͍ͦΒɺ ͏ͭ͘ ͍͠৿Ͱ০ΒΕͨϞϦʔΦࢢɺ ߫֎ͷ͗Β͗Βͻ͔Δ૲ͷ೾ɻ ೔ຊޠ The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items from a string. English ӳޠͷΑ͏ʹ೔ຊޠΛ૊Ή
18. ͋ͷʗΠʔϋ τʔϰΥʗͷʗ͖͢ʗͱ͓ͬͨʗ෩ʗɺ ʗ ՆʗͰ΋ʗఈʗʹʗྫྷͨ͞ʗΛʗ΋ͭʗ੨͍ʗͦΒ ӳޠͷΑ͏ʹ೔ຊޠΛ૊Ή ʹ ܗଶૉղੳʹ͔͚ͯจΛ୯ޠʹ෼ׂ͠ɺ վߦҐஔΛϒϥ΢βʹ఻͑Δ ~~~~~~~~~~
19. Ωʔϫʔ υݕࡧͳͲͰ΋࢖ΘΕΔɺ ൺֱతલ͔Β͋Δٕज़ ͋ͷʗΠʔϋ τʔϰΥʗͷʗ͖͢ʗͱ͓ͬͨʗ෩ʗɺ ʗ ՆʗͰ΋ʗఈʗʹʗྫྷͨ͞ʗΛʗ΋ͭʗ੨͍ʗͦΒ ӳޠͷΑ͏ʹ೔ຊޠΛ૊Ή ʹ ܗଶૉղੳʹ͔͚ͯจΛ୯ޠʹ෼ׂ͠ɺ վߦҐஔΛϒϥ΢βʹ఻͑Δ ~~~~~~~~~~
20. 2 . ࿨ Ԥ ࠞ ২ʹ͓͚Δ՝ ୊
21. Web ૊൛ʹ͓͚Δٖࣅࠞ২ body { font-family: Helvetica, "Hiragino Sans", sans-selif; } ~~~~~~~~~ ~~~~~~~~~~~~~~~ ӳ਺ ೔ຊޠ ʢ͜ͷྫͰ͸ώϥΪϊ֯ΰʣ
22. Adobe ܥιϑ τͷ ʮ߹੒ϑΥϯ τʯ ػೳ ɾ Ԥจͷॻମɺ αΠζɺ ϕʔεϥΠϯ౳Λௐ੔
23. Adobe ܥιϑ τͷ ʮ߹੒ϑΥϯ τʯ ػೳ ɾ Ԥจͷॻମɺ αΠζɺ ϕʔεϥΠϯ౳Λௐ੔
24. ࿨จʗԤจॻମͷଠ͞ײ͕߹Θͳ͍ ~~~~~~
25. தΰγοΫ ʴ Aktiv Grotesk Light υΠπ͔Βདྷͨ Sweynheim ͱ Pannartz ͱ͍͏ೋਓ͕ ͪΐͬͱࡉ͍
26. υΠπ͔Βདྷͨ Sweynheim ͱ Pannartz ͱ͍͏ೋਓ͕ தΰγοΫ ʴ Aktiv Grotesk Regular ؾ࣋ͪଠ͍
27. ࿨จʗԤจॻମͷจࣈ͕ؒ߹Θͳ͍ ~~~~~~
28. υΠπ͔Βདྷͨ Sweynheim ͱ Pannartz ͱ͍͏ೋਓ͕ τϥοΩϯά 0 ʗ࿨จϕλ૊Έ Ԥจ͕٧·Γؾຯ
29. υΠπ͔Βདྷͨ S weynheim ͱ Pannar t z ͱ͍͏ೋਓ͕ τϥοΩϯά 150 ʗ࿨จπϝ૊Έ Ԥจ͕։͖ؾຯ
30. ӳ ޠ ʢ·ͨ͸೔ຊ ޠ ʣ ʹ͚ͩ CSSΛ౰ͯΔ ʮ࿨Ԥࠞ২ʹ͓͚Δ՝୊ʯ ղ๏
31. υΠπ͔Βདྷͨ S weynheim ͱ Pannar t z ͱ͍͏ೋਓ͕ <p> υΠπ͔ΒདྷͨSweynheimͱ Pannartzͱ͍͏ೋਓ͕ </p> HTML p { font-feature-settings: 'palt'; /* πϝ૊Έ */ letter-spacing: 0.15em; /* τϥοΩϯά150 */ } CSS OUTPUT
32. υΠπ͔Βདྷͨ S weynheim ͱ Pannar t z ͱ͍͏ೋਓ͕ <p> υΠπ͔Βདྷͨ<latin>Sweynheim</latin> ͱ<latin>Pannartz</latin>ͱ͍͏ೋਓ͕ </p> HTML OUTPUT p {... /* ڞ௨ελΠϧͦͷ·· */} latin { /* ͜͜ʹԤจͷελΠϧΛॻ͍͍ͯ͘ */ } CSS HTMLλάͰғ͏
33. υΠπ͔Βདྷͨ 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 ԤจͷελΠϧΛఆٛ
34. ·ͱΊ
35. Web Ͱ͸೔ຊޠͷ྆୺ଗ͑Λ࠾༻͠ʹ͍͘έʔε͕͋Γɺ σβΠφʔ͸ϠΩϞΩ͍ͯ͠Δ ʢ͸ͣʣ → ӳޠͷΑ͏ͳ୯ޠ۠੾ΓͷվߦΛɺ ೔ຊޠʹ΋ಋೖͯ͠ΈΑ͏ 1. ߦଗ͑ʹ͓͚Δ՝୊ !
36. ࿨จʗԤจͷϑΥϯ τΛ૊Έ߹Θͤͨ࣌ʹɺ ԤจͷαΠζɺ ϕʔεϥΠϯɺ จࣈؒɺ ଠ͞ײΛௐ੔͍ͨ͠ → ԤจΛ HTML λάͰғͬͯɺ CSSΛ౰ͯΑ͏ 2. ࿨Ԥࠞ২ʹ͓͚Δ՝୊ !
37. ࠓճղઆ ɾӳޠͷΑ͏ͳ୯ޠ۠੾ΓͰͷվߦ ɾԤจΛ HTML λάͰғ͏ ɾ࿈ଓ͢Δ෼཭ېଇจࣈͷจࣈؒΛ 0 ʹ͢Δ ɾ࢛෼ΞΩεϖʔεͷࣗಈૠೖ ɾΧʔχϯάϧʔϧͷద༻ Palt Typesetting ϥΠϒϥϦ
38. ӳޠͷΑ͏ͳ ୯ޠ۠੾ΓͰͷվߦ ػೳΦϑ useWordBreak: false
39. ӳޠͷΑ͏ͳ ୯ޠ۠੾ΓͰͷվߦ ػೳΦϯ useWordBreak: true
40. ԤจΛ HTMLλάͰғ͏ ػೳΦϑ wrapLatin: false U
41. ԤจΛ HTMLλάͰғ͏ ػೳΦϯ wrapLatin: true U
42. ࿈ଓ͢Δ෼཭ېଇจࣈ ʢμογϡɺ ܩઢͳͲʣ ͷ จࣈؒΛ 0 ʹ͢Δ ػೳΦϑ noSpaceBetweenNoBreaks: false
43. ࿈ଓ͢Δ෼཭ېଇจࣈ ʢμογϡɺ ܩઢͳͲʣ ͷ จࣈؒΛ 0 ʹ͢Δ ػೳΦϯ noSpaceBetweenNoBreaks: true
44. ࢛෼ΞΩεϖʔεͷ ࣗಈૠೖ ػೳΦϑ insertThinSpaces: false
45. ࢛෼ΞΩεϖʔεͷ ࣗಈૠೖ insertThinSpaces: true ػೳΦϯ
46. Χʔχϯάϧʔϧͷ ద༻ ػೳΦϑ kerning: []
47. Χʔχϯάϧʔϧͷ ద༻ ػೳΦϯ kerning: [{ between: ['ඒ', '͠'], value: 60 },/* தུ */ { between: ['͢', 'ɻ '], value: -120 }]