Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
iOSΞϓϦͰLine HeightΛ ઃఆ͢Δͱ͖ʹҙ͍ͨ͜͠ͱ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
Slide 2
Slide 2 text
mixi, Inc. ࣗݾհ ϩΫωϜ / rockname • ϛΫγΟͰʮՈΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ • εϚϒϥ͕͖
Slide 3
Slide 3 text
mixi, Inc. iOSΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠ • Line HeghitʹԿઃఆ͠ͳ͔ͬͨ߹ ӈਤͷΑ͏ʹځ۶ͳҹΛ༩͑ͯ͠·͏ • ߦؒʹదͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ ಡΈ͘͢ද͍ࣔͨ͠
Slide 4
Slide 4 text
mixi, Inc. Line Heightͷఆٛ Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞ https://material.io/design/typography/understanding-typography.html#type-properties
Slide 5
Slide 5 text
mixi, Inc. NSParagraphStyle > lineSpacing • iOSͰߦؒΛࢦఆ͍ͨ͠߹ͪ͜ΒΛ͏ • lineSpacingΛઃఆͨ͠NSParagraphStyleΛ NSAttributedStringʹՃ͢Δ
Slide 6
Slide 6 text
mixi, Inc.
Slide 7
Slide 7 text
mixi, Inc. Line HeightΛઃఆ • fontSize: 25pt ʹରͯ͠ lineSpacing: 5pt Λઃఆ (Line Height͕30ʹͳΔ͜ͱΛظ)
Slide 8
Slide 8 text
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ظͷ30ptʹରͯ͠5ptେ͖͍Line Height • ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ
Slide 9
Slide 9 text
mixi, Inc. UIFont > lineHeight • UIFontʹσϑΥϧτͰlineHeight͕ઃఆ͞Ε͍ͯΔ • ͜ͷΛߟྀͯ͠NSAttributedStringʹlineSpacing Λઃఆ͢Δඞཁ͕͋ͬͨ
Slide 10
Slide 10 text
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • UIFont.font.pointSizeͱUIFont.lineHeightͱ NSParagraphStyle.lineSpacing ӈਤͷΑ͏ͳؔ • ͭ·ΓɺҎԼͷΑ͏ͳ͕ࣜΓཱͭ lineSpacing = ఆ͢Δߦؒ - (lineHeight - fontSize)
Slide 11
Slide 11 text
mixi, Inc.
Slide 12
Slide 12 text
mixi, Inc. దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ • ఆ௨Γ30ptͷLine HeightΛઃఆͰ͖͍ͯΔ
Slide 13
Slide 13 text
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
Slide 14
Slide 14 text
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
Slide 15
Slide 15 text
mixi, Inc. [Practice] Line HeightΛTypographyͱ࿈ಈ͢ΔΑ͏ఆٛ
Slide 16
Slide 16 text
Thank you!!!