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

by Tomoki Kobayashi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ͦ͜Ͱ

Slide 10

Slide 10 text

ݕূΞϓϦ  Λͭͬͯ͘Έͨ w 6*-BCFMΛϨΠΞ΢τ w 6*'POU͔ΒಘΒΕΔ  ϑΥϯτϝτϦΫεͷՄࢹԽ w /4"UUSJCVUFE4USJOHͷ  /41BSBHSBQI4UZMFΛՄࢹԽ  ߦؒ΍ߦͷߴ͞ͷࢦఆ w (JU)VCͰެ։͍ͯ͠·͢  IUUQTHJUIVCDPNUFNPLJJ045FYU-BZPVU

Slide 11

Slide 11 text

ԤจϑΥϯτϝτϦΫε Type abc xAscender Cap Base Mean Descender Base Line ͢΂ͯͷจࣈͷج४ͱͳΔઢ Mean Line খจࣈͷߴ͞ͷج४ͱͳΔઢ Cap Line େจࣈͷߴ͞ͷج४ͱͳΔઢ Ascender Line খจࣈͷC΍IͳͲ͕࣋ͭΞηϯμʔͱݺ͹ΕΔ ਨ௚ͳઢͷ্෦ͷج४ͱͳΔઢ Descender Line খจࣈͷQͳͲ͕࣋ͭσΟηϯμʔͱݺ͹ΕΔ ਨ௚ͳઢͷԼ෦ͷج४ͱͳΔઢ ෳ਺ͷج४ઢͰߏ੒͞ΕΔ

Slide 12

Slide 12 text

ԤจϑΥϯτϝτϦΫε .lineHeight ςΩετ̍ߦͷߴ͞ .xHeight #BTFϥΠϯ͔Β.FBOϥΠϯ·Ͱͷߴ͞ .capHeight #BTFϥΠϯ͔Β$BQϥΠϯ·Ͱͷߴ͞ .ascender #BTFϥΠϯ͔Βτοϓ΁ͷΦϑηοτ .descender #BTFϥΠϯ͔ΒϘτϜ΁ͷΦϑηοτ ෛ஋ 6*'POUͷϓϩύςΟͰ೺ѲͰ͖Δ Type abc x .lineHeight .ascender .descender .capHeight .xHeight

Slide 13

Slide 13 text

࿨จϑΥϯτϝτϦΫε ʢࢀߟ৘ใʣ࿨จϑΥϯτͷϘσΟͱࣈ໘ Ѫ w ࿨จϑΥϯτͷจࣈ͸͢΂ͯಉ͡αΠζͷ ਖ਼ํܗྖҬʢʹϘσΟʣʹऩΊΒΕΔɻ w จࣈͦͷ΋ͷ͸ɺϘσΟΑΓ΋ҰճΓ  খ͍͞ʮࣈ໘ʯͷதʹσβΠϯ͞ΕΔɻ ͜Ε͸ɺจࣈΛฒ΂ͨͱ͖ʹจࣈؒʹ  ద౓ͳۭؒΛ࡞ΔͨΊɻ w 6*'POU͔Β͜ΕΒͷ৘ใ͸ಘΒΕͳ͍ ϘσΟ ࣈ໘ ͮ͡Β

Slide 14

Slide 14 text

Ή͔͍ͣ͠ࣄྫΛݕূ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Ή͔͍ͣ͠

Slide 23

Slide 23 text

ࢀߟจݙ w .BTBTIJ0OPʮJ04ͷϑΥϯτͷ࿩ʯ"-JBJTPO#-0(  IUUQBLJTVUFDPNJPTIUNM w ,JTIJLBXB,BUTVNJʮ.BTUFSJOH5FYU,JUʯ  IUUQTTQFBLFSEFDLDPNLJTIJLBXBLBUTVNJNBTUFSJOHUFYULJU w ੢ํՆࢠʮ6*,JUపఈղઆʯΠϯϓϨεϒοΫε w େ࡚ت࣏ʮλΠϙάϥϑΟͷجຊϧʔϧʯ4#$SFBUJWF