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

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

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

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

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

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

ͦ͜Ͱ

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

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

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

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

Ή͔͍ͣ͠ࣄྫΛݕূ

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

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

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

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

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

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

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

Ή͔͍ͣ͠

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

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

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

Tomoki Kobayashi

More Decks by Tomoki Kobayashi

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

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

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

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

ͦ͜Ͱ

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

ԤจϑΥϯτϝτϦΫε Type abc xAscender Cap Base Mean Descender Base Line

ԤจϑΥϯτϝτϦΫε .lineHeight ςΩετ̍ߦͷߴ͞ .xHeight #BTFϥΠϯ͔Β.FBOϥΠϯ·Ͱͷߴ͞ .capHeight #BTFϥΠϯ͔Β$BQϥΠϯ·Ͱͷߴ͞ .ascender #BTFϥΠϯ͔Βτοϓ΁ͷΦϑηοτ .descender

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

Ή͔͍ͣ͠ࣄྫΛݕূ

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

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

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

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

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

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

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

Ή͔͍ͣ͠

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