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

iOS のテキストレイアウトがむずかしい話

0b8ad408b31cb9d5cff2828086c65d58?s=47 temoki
December 02, 2016

iOS のテキストレイアウトがむずかしい話

Mobile Act NAGOYA #3 の LT 資料
https://mobileactnagoya.connpass.com/event/44624/

0b8ad408b31cb9d5cff2828086c65d58?s=128

temoki

December 02, 2016
Tweet

Transcript

  1. J04ͷ5FYU-BZPVU͕ Ή͔͍ͣ͠࿩ Mobile Act NAGOYA #3

  2. #1 Play Back λΠτϧ͸ཾҰ࿠͞ΜͷεϥΠυͷӨڹ

  3. #1 Play Back σβΠϯͷ࣮૷͸Ή͔͍ͣ͠ͱ͍͏͓࿩Λ͠·ͨ͠

  4. #1 Play Back σβΠϯͷ࣮૷͸Ή͔͍ͣ͠ͱ͍͏͓࿩Λ͠·ͨ͠

  5. #1 Play Back σβΠϯͷ࣮૷͸Ή͔͍ͣ͠ͱ͍͏͓࿩Λ͠·ͨ͠

  6. #1 Play Back σβΠϯͷ࣮૷͸Ή͔͍ͣ͠ͱ͍͏͓࿩Λ͠·ͨ͠

  7. ΞϓϦσβΠϯݚڀձ w ΞϓϦΤϯδχΞͱσβΠφʔ͕ू·ͬͯ
 ఆظతʹ࣮ࢪ͍ͯ͠Δࣾ಺ษڧձ w σβΠφʔͷҙਤͲ͓Γ࣮૷͢Δͷ͕
 Ή͔͍ͣ͠ͱ͍͏ͷ͕௚ۙͷ࿩୊ͷத৺ w ಛʹʮςΩετϨΠΞ΢τʯ͕ϗοτʂ

  8. ςΩετϨΠΞ΢τ 6*-BCFMͰ͢ΒϨΠΞ΢τ͕͏·͍͔͘ͳ͍ʂ
 ΤϯδχΞ΍σβΠφʔͷϛεͰ͸ͳͦ͞͏ɻ w ςΩετͷ഑ஔҐஔ w ςΩετͷจࣈαΠζ w ςΩετͷߦؒ

  9. ͦ͜Ͱ

  10. ݕূΞϓϦ
 Λͭͬͯ͘Έͨ w 6*-BCFMΛϨΠΞ΢τ w 6*'POU͔ΒಘΒΕΔ
 ϑΥϯτϝτϦΫεͷՄࢹԽ w /4"UUSJCVUFE4USJOHͷ
 /41BSBHSBQI4UZMFΛՄࢹԽ


    ߦؒ΍ߦͷߴ͞ͷࢦఆ  w (JU)VCͰެ։͍ͯ͠·͢
 IUUQTHJUIVCDPNUFNPLJJ045FYU-BZPVU
  11. ԤจϑΥϯτϝτϦΫε Type abc xAscender Cap Base Mean Descender Base Line

    ͢΂ͯͷจࣈͷج४ͱͳΔઢ Mean Line খจࣈͷߴ͞ͷج४ͱͳΔઢ Cap Line େจࣈͷߴ͞ͷج४ͱͳΔઢ Ascender Line খจࣈͷC΍IͳͲ͕࣋ͭΞηϯμʔͱݺ͹ΕΔ ਨ௚ͳઢͷ্෦ͷج४ͱͳΔઢ Descender Line খจࣈͷQͳͲ͕࣋ͭσΟηϯμʔͱݺ͹ΕΔ ਨ௚ͳઢͷԼ෦ͷج४ͱͳΔઢ ෳ਺ͷج४ઢͰߏ੒͞ΕΔ
  12. ԤจϑΥϯτϝτϦΫε .lineHeight ςΩετ̍ߦͷߴ͞ .xHeight #BTFϥΠϯ͔Β.FBOϥΠϯ·Ͱͷߴ͞ .capHeight #BTFϥΠϯ͔Β$BQϥΠϯ·Ͱͷߴ͞ .ascender #BTFϥΠϯ͔Βτοϓ΁ͷΦϑηοτ .descender

    #BTFϥΠϯ͔ΒϘτϜ΁ͷΦϑηοτ ෛ஋ 6*'POUͷϓϩύςΟͰ೺ѲͰ͖Δ Type abc x .lineHeight .ascender .descender .capHeight .xHeight
  13. ࿨จϑΥϯτϝτϦΫε ʢࢀߟ৘ใʣ࿨จϑΥϯτͷϘσΟͱࣈ໘ Ѫ w ࿨จϑΥϯτͷจࣈ͸͢΂ͯಉ͡αΠζͷ ਖ਼ํܗྖҬʢʹϘσΟʣʹऩΊΒΕΔɻ w จࣈͦͷ΋ͷ͸ɺϘσΟΑΓ΋ҰճΓ
 খ͍͞ʮࣈ໘ʯͷதʹσβΠϯ͞ΕΔɻ ͜Ε͸ɺจࣈΛฒ΂ͨͱ͖ʹจࣈؒʹ


    ద౓ͳۭؒΛ࡞ΔͨΊɻ w 6*'POU͔Β͜ΕΒͷ৘ใ͸ಘΒΕͳ͍ ϘσΟ ࣈ໘ ͮ͡Β
  14. Ή͔͍ͣ͠ࣄྫΛݕূ

  15. ਨ௚ํ޲ͷ഑ஔ͕Ή͔͍ͣ͠ ࣈ໘ʹର͢Δ༨നͷӨڹ σβΠφʔ͕ ࢦఆ͢ΔϚʔδϯΛ ༨ന ༨ന ΤϯδχΞ͕ ࣮૷͢Δͱ͜͏ͳΔ ʢϑΥϯτʹґଘʣ

  16. จࣈαΠζࢦఆ͕Ή͔͍ͣ͠ γεςϜϑΥϯτ͸߹੒ϑΥϯτͰ͢ ʢԤจ͕αϯϑϥϯγείɺ࿨จ͕ώϥΪϊ֯ΰγοΫʣ σβΠφʔ͸γεςϜϑΥϯτΛҙࣝͯ͠ ώϥΪϊ֯ΰγοΫͰσβΠϯ͢Δ ΤϯδχΞ͸γεςϜϑΥϯτΛࢦఆ͢Δ αΠζ͸ͲͪΒ΋QUͳͷʹγεςϜϑΥϯτ͸एׯখ͍͞ʂ

  17. ߦؒͷࢦఆ͕Ή͔͍ͣ͠ʁ ߦؒ͸/41BSBHSBQI4UZMFͷMJOF4QBDJOHͰࢦఆ͢Δ ߦؒ ߦؒ

  18. ߦؒͷࢦఆ͕Ή͔͍ͣ͠ʂ γεςϜϑΥϯτͰ೔ຊޠ͕ࠞ͡ΔͱߦͰ΋ߦ͕ؒ෇༩͞ΕΔ ߦؒ ΞϧϑΝϕοτͷΈ ೔ຊޠΛؚΉ

  19. ߦؒͷࢦఆ͕Ή͔͍ͣ͠ʂ γεςϜϑΥϯτͰ͸ͳ͘ώϥΪϊ֯ΰγοΫΛࢦఆ͢Δͱ ߦͷ৔߹Ͱ΋ߦؒ͸෇༩͞Εͳ͍☺ ώϥΪϊ֯ΰγοΫ γεςϜϑΥϯτ

  20. ߦؒͷࢦఆ͕Ή͔͍ͣ͠❗ ώϥΪϊ֯ΰγοΫΛࢦఆ͢Δͱจࣈ͕੾ΕΔ$ ʢσΟηϯμʔෆ଍ɻ͓ͦΒ͘࿨จϑΥϯτͱͯ͠ͷϘσΟΛ༏ઌʣ ώϥΪϊ֯ΰγοΫ QͷԼ͕੾Ε͍ͯΔ

  21. ·ͱΊ w J04ͷςΩετϨΠΞ΢τ͸Ή͔͍ͣ͠ w ͦͯ͠γϯϓϧͳղܾࡦ͕ݟ͔ͭΒͳ͍ w QYʹ΋ͩ͜ΘΔͱ͍͏ͷ͸Ή͔͍ͣ͠

  22. Ή͔͍ͣ͠

  23. ࢀߟจݙ w .BTBTIJ0OPʮJ04ͷϑΥϯτͷ࿩ʯ"-JBJTPO#-0(
 IUUQBLJTVUFDPNJPTIUNM w ,JTIJLBXB,BUTVNJʮ.BTUFSJOH5FYU,JUʯ
 IUUQTTQFBLFSEFDLDPNLJTIJLBXBLBUTVNJNBTUFSJOHUFYULJU w ੢ํՆࢠʮ6*,JUపఈղઆʯΠϯϓϨεϒοΫε w

    େ࡚ت࣏ʮλΠϙάϥϑΟͷجຊϧʔϧʯ4#$SFBUJWF