Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Font and Typesetting

Introduction to Font and Typesetting

iOSDC Japan 2018 https://iosdc.jp/2018/
フォントと組版の30分入門

#iosdc #c

Shigure Shimotori

August 31, 2018
Tweet

More Decks by Shigure Shimotori

Other Decks in Programming

Transcript

  1. ࢿྉ
    [email protected]@QVCͷݻఆπΠʔτ

    View Slide

  2. ϑΥϯτͱ૊൛ͷ30෼ೖ໳
    iOSDC Japan 2018
    2018/08/31
    ͠΋ͱΓ @S_Shimotori_pub

    View Slide

  3. ࣗݾ঺հ
    ͠΋ͱΓ
    ɹɹ @S_Shimotori_pub
    iOSDC ωοτϫʔΫνʔϜ
    ※ઈରϑΥϯτײ͸͋Γ·ͤΜ


    View Slide



  4. View Slide

  5. ຊ୊


    View Slide

  6. iOSΤϯδχΞʹ
    ฉ͍ͯཉ͍͠τʔΫ
    ʢ30෼ʣ


    View Slide

  7. ϚδͰΨνͳτʔΫͰ͢ʂ


    View Slide

  8. ໘ന͍͔Βฉ͍ͯ΄͍͠τϐοΫ
    • ϑΥϯτͱ͸૊൛ͱ͸
    • ͍Ζ͍Ζͳݴޠͱ૊൛
    • ҹ࡮෺Λ࡞Δ


    View Slide

  9. ϑΥϯτͱ͸૊൛ͱ͸


    View Slide

  10. ׆൛ҹ࡮ͷ༻ޠͰ͢ʂ


    View Slide

  11. ׆൛ҹ࡮ͷͳ͕Ε
    ׆ࣈΛ ૊Έ൛ʹͯ͠ ࡮Δʂ
    ҹ࡮ത෺ؗʹͯɻ


    View Slide

  12. View Slide

  13. ϑΥϯτ
    ίϯϐϡʔλʔͰ࢖͏จࣈͷσβΠϯͷ͜ͱɻ׆ࣈͷ࣌୅
    ʹ͸ɺಉ͡ॻମͰಉ͡αΠζͷ׆ࣈηοτΛࢦ͢ݴ༿Ͱ
    ͕͋ͬͨɺిࢉࣸ২΍DTPͰ͸ͻͱͭͷϑΥϯτͰ֦େ΍
    ॖখɺมܗ͕Ͱ͖ΔͨΊɺଠࣈ΍ࣼମͳͲͷελΠϧΛؚ
    ΊͯϑΥϯτͱݺͿΑ͏ʹͳͬͨɻ
    ASCII σδλϧ༻ޠࣙయΑΓ


    View Slide

  14. View Slide



  15. ஍਒Ͱձࣾͷ׆ࣈ͕…
    ͳ͔΋ͱΏ͏(@nakamotoyuu)
    https://twitter.com/nakamotoyuu/status/1008488924644163585

    View Slide

  16. ૊൛
    ݪߘʹج͍ͮͯ׆ࣈΛ૊Έɼ࠷ऴతʹ͸൛Λ࡞Δ·Ͱͷ
    ࡞ۀ͓Αͼ׬੒ͨ͠൛ɽ

    ʢதུʣ

    खಈɼػց͞Βʹ͸ίϯϐϡʔλͰ͋ͬͯ΋ɼ૊൛ͱ͍͏
    දݱ͸࢖ΘΕ͍ͯΔɽ
    ਤॻؗ৘ใֶ༻ޠࣙయ ୈ4൛ΑΓ


    View Slide

  17. ݱࡏʢ1985೥ʙʣ

    View Slide

  18. ׆൛ҹ࡮ͷ͓࿩͸͜͜·Ͱʂ


    View Slide

  19. ͍Ζ͍Ζͳݴޠͱ૊൛


    View Slide

  20. ͜Μͳͱ͜Ζʹ૊൛͕ʂ
    • ӳޠͰ #શ෦ಉ͡͡Όͳ͍Ͱ͔͢ SPACEฤ
    • ೔ຊޠͰiOSॎॻ͖ʹ௅ઓ
    • λΠޠͰTall Script
    • ΞϥϏΞޠͰRTLͱ߹ࣈ


    View Slide

  21. ӳޠͰ #શ෦ಉ͡͡Όͳ͍Ͱ͔͢
    SPACEฤ

    View Slide

  22. https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9

    View Slide

  23. https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9
    શ෦ಉ͡͡Όͳ͍Ͱ͔͢

    View Slide



  24. ΋ͬͱΑ͘ݟΖʂ

    View Slide



  25. ͓୊

    l*OUSPEVDUJPOUP'POUBOE5ZQFTFUUJOHz

    View Slide



  26. ͓୊

    l*OUSPEVDUJPOUP'POUBOE5ZQFTFUUJOHz




    View Slide



  27. ※SF Pro Text

    View Slide

  28. εϖʔεͱΞΩ
    U+2003 EM SPACE
    U+2002 EN SPACE
    U+2004 THREE-PER-EM SPACE
    U+2005 FOUR-PER-EM SPACE
    U+2006 SIX-PER-EM SPACE


    View Slide

  29. εϖʔεͱΞΩ
    U+2003 EM SPACE
    U+2002 EN SPACE
    U+2004 THREE-PER-EM SPACE
    U+2005 FOUR-PER-EM SPACE
    U+2006 SIX-PER-EM SPACE


    View Slide



  30. ͓୊ᶄ

    View Slide



  31. EN
    ENͱ1/4EM
    InDesign
    ΞΩࣗಈ
    ※ώϥΪϊ֯ΰγοΫ

    View Slide

  32. ೔ຊޠͰiOSॎॻ͖ʹ௅ઓ


    View Slide

  33. View Slide



  34. ͓୊

    lʰϑΥϯτͱ૊൛ͷ෼ೖ໳ʱz

    View Slide

  35. ʰaOϑaOΥaOϯaOτaOͱaO૊aO൛aOͷaOʜ


    View Slide



  36. 1ߦ1จࣈ

    View Slide



  37. 1ߦ1จࣈ ͓खຊ

    View Slide



  38. ޲͖͕͓͔͍͠ ❌




    ͓खຊ
    ޲͖͕͓͔͍͠
    ࠨԼʹدͬͯΔ
    ࠨʹدͬͯΔ

    View Slide



  39. ޲͖͕͓͔͍͠ ❌




    ͓खຊ
    ޲͖͕͓͔͍͠
    ࠨԼʹدͬͯΔ
    ࠨʹدͬͯΔ

    View Slide



  40. ޲͖͕͓͔͍͠ ❌




    ͓खຊ
    ޲͖͕͓͔͍͠
    ࠨԼʹدͬͯΔ
    ࠨʹدͬͯΔ

    View Slide

  41. 1ߦ1จࣈํࣜͷ໰୊఺
    • ه߸ͷ޲͖͕ԣॻ͖ͷ··
    • ፠ԻͷҐஔ΋ԣॻ͖ͷ··
    • ൒֯ӳ਺ࣈͷҐஔ͕ࠨʹدͬͯ͠·͏







    View Slide

  42. ೔ຊޠͷॎॻ͖Ͱඞཁͳ࡞ۀ
    • ॎॻ͖༻ͷάϦϑΛ࢖͏
    • தԝἧ͑Ͱฒ΂Δ
    • JIS X 4051ͷఆΊΔͱ͜Ζʹै͏


    View Slide

  43. άϦϑ
    ܗঢ়ʹ͍ͭͯͷந৅త֓೦
    1ͭͷจࣈʹෳ਺ͷάϦϑ͕͋Δ͜ͱ΋
    ɹɹe.g. Χοί։͖ʹ͸ɹɹͱɹɹͷ͔͕ͨͪ͋Δ
    ɹɹɹɹ፠Ի͸ࠨԼʹॻ͘ͱ͖ͱӈ্ʹॻ͘ͱ͖͕͋Δ


    ʰ
    ʰ

    View Slide

  44. ॎॻ͖༻άϦϑ
    ϑΥϯτʹΑͬͯ͸ผʹ༻ҙ͋Γ
    ༻ҙ͕ͳͯ͘΋90౓ճసͤ͞Ε͹OK







    View Slide

  45. https://developer.apple.com/documentation/foundation/nsattributedstring/key/1528658-verticalglyphform
    “1 indicates vertical text”
    “horizontal text is always used”

    View Slide

  46. “1 indicates vertical text”
    “horizontal text is always used”
    https://developer.apple.com/documentation/foundation/nsattributedstring/key/1528658-verticalglyphform
    glyph
    typesetting

    View Slide

  47. จࣈͷฒ΂͔ͨ
    ӳޠ͸base lineͰϕʔεฒͼɺ
    ೔ຊޠ͸จࣈͷதԝͰηϯλʔฒͼ


    View Slide






  48. View Slide

  49. தԝ͕ἧ͏Α͏ʹฒ΂Δ
    ౳෯ϑΥϯτΛ࢖͏
    or
    શ֯ӳ਺ࣈΛ࢖͏
    or
    CoreTextͷग़൪







    View Slide

  50. λΠޠͰTall Script
    λΠจࣈ·Ώ͛


    View Slide

  51. λΠޠͷಛ௃
    • λΠจࣈΛ༻͍Δ
    • Tall scriptͷҰछ
    λΠจࣈ·Ώ͛


    สวัสดีชาวโลก!

    View Slide

  52. λΠจࣈ·Ώ͛

    View Slide

  53. λΠจࣈ·Ώ͛
    ϓϦοπͷϥʔϒຯʂ

    View Slide

  54. λΠจࣈ·Ώ͛
    ϓϦοπͷϥʔϒຯʂ

    View Slide

  55. λΠจࣈ·Ώ͛
    αϥμຯ

    View Slide

  56. λΠจࣈ·Ώ͛

    View Slide

  57. λΠจࣈ·Ώ͛

    View Slide

  58. ΞϥϏΞޠ


    View Slide

  59. ΞϥϏΞޠͷಛ௃
    • ΞϥϏΞจࣈΛ༻͍Δ
    • ӈԣॻ͖
    • ߹ࣈ


    View Slide

  60. ӈԣॻ͖ Right-to-Left
    ӈ͔Βࠨͷ޲͖Ͱॻ͍͍ͯ͘͜ͱ
    ݱ࣮ʹ͸RTLͱLTR͕ࠞࡏ͢Δ૒ํ޲ςΩετʹͳΔ


    View Slide

  61. https://www.apple.com/
    https://www.apple.com/ae-ar/


    View Slide

  62. iOSʹ͓͚ΔRTL
    UIViewΛӈ͔Βࠨʹ഑ஔ
    navigation͸ࠨ͕nextɺӈ͕back
    Ұ෦ͷΞΠίϯΛमਖ਼(൓సͳͲ)


    View Slide



  63. View Slide

  64. ࣌ܭճΓ͸ͲͬͪճΓʁ


    View Slide



  65. View Slide

  66. ߹ࣈ Ligature
    ྡΓ߹ͬͨೋͭͷจࣈ຺ུ͕ͷ͋Δ͔ͨͪͱͯࣗ͠વʹ

    Έ͑ΔΑ͏Ͱ͖ͨάϦϑ

    et &


    View Slide

  67. ΞϥϏΞޠͷ߹ࣈ
    ߹੒લ
    ߹੒ޙ


    ❓❓❓

    View Slide

  68. ΞϥϏΞޠͷ߹ࣈ
    ߹੒લ
    ߹੒ޙ


    View Slide

  69. ݴޠͷ͓࿩͸͜͜·Ͱʂ


    View Slide

  70. ҹ࡮෺Λ࡞Δ


    View Slide



  71. ೖߘͷྲྀΕ

    View Slide

  72. ҹ࡮෺Λ࡞Δ͓࿩
    • PDFͱϑΥϯτͷ͓࿩
    • ϦονͳΦϓγϣϯ


    View Slide

  73. PDFͱϑΥϯτͷ͓࿩


    View Slide

  74. ࠶ܝɿAppleͱAdobeͷਤ
    Aldus͸Adobe͕ඒຯ͘͠৯΂·ͨ͠

    View Slide

  75. PDF͕อ࣋͢Δ৘ใʢྫʣ
    • ༻ࢴαΠζ
    • ϑΥϯτ৘ใ
    • ίϯςϯπΛ഑ஔ͢ΔҐஔ
    • ςΩετ
    • ਤܗ


    View Slide

  76. ϑΥϯτσʔλ͸Ͳ͜ʁ
    Ӿཡऀͷίϯϐϡʔλʹ͓·͔ͤ
    or
    ඞཁͳͿΜΛPDFࣗ਎Ͱอ࣋
    or
    Ξ΢τϥΠϯԽͯ͠ϑΥϯτ৘ใഁغ
    ຒΊࠐΈʁ


    Apple Chancery

    View Slide

  77. ϦονͳΦϓγϣϯ


    View Slide

  78. ͩ͜ΘΓϙΠϯτ͸͜͜ʂ
    ☑ ࢴ͕ްΊ
    ☑ ಛघࢴΛ࢖͍ͬͯΔ
    ☑ ༡ͼࢴΛೖΕ͍ͯΔ
    ☑ ഩΛೖΕ͍ͯΔ
    ☑ ৭਺͕ଟ͍
    ☑ ಛ৭Λ࢖͍ͬͯΔ
    ໊ࢗʹ͓ۚΛ࢖͏ͷ΋ָͦ͠͏


    View Slide

  79. Ҏ্ʂ


    View Slide

  80. ·ͱΊ
    • ׆൛ҹ࡮ͷӨڹ͸ະͩڧ͠
    • ֤ݴޠͷಛ௃ͷ೺Ѳ͕େࣄ
    • ॎॻ͖͸೉қ౓͕ߴ͍
    • ࣮ߦҕһ௕͸ޫΓ෺͕޷͖ͬͯ͝ຊਓ͕͓ͬ͠Όͬͯ·ͨ͠


    View Slide

  81. ͨͷ͍͠ࢀߟจݙ
    • https://github.com/S-Shimotori/iOSDC2018Draft
    • Book/bibliographies ΍ Referenfe.md ͋ͨΓ
    • Θͨ͠ͷiOSDCײ૝ϒϩάʹਪનਤॻॻ͔͘΋
    • ௚઀ฉ͍ͯʂ


    View Slide

  82. ,
    ͓͠·͍ʂ


    View Slide