textAlignVertical Best Practice

https://docs.google.com/presentation/d/1l3BMQHp2R5bDFReQQHxAIJrXL5bpJr9mn-3zBu-xmaY/edit?usp=sharing

Transcript

1. textAlignVertical Best Practice @mrtry 2025/11/04 - React Native Meetup #23
2. ⾃⼰紹介 • JMDC, Inc / ventus, Inc ◦ Mobile App Engineer ◦ Scrum Master • React Native Meetup Organizer • 卒: ⾼専(情報⼯学) / 現: ⼤学⽣(認知科学) 2
3. 上下中央揃えしたいが、OSで揃わないので調べた • テキストの垂直中央揃えが Android / iOS でずれる問題があった ◦ iOSは垂直中央揃えされるが、Androidはされてくれないことがほとんど • 原因は、フォントの描画⽅式の差分だった • その違いと対処⽅法についてまとめた なんか上に寄ってる こうなってほしい 3
4. フォントには2つの⾼さ基準があった
5. フォントには2つの⾼さ基準があった • フォントには2種類の⾼さ基準がある ◦ ascent / descent ◦ top / bottom 5
6. iOSは ascent / descent を基準にする • iOSはascent / descentを基準にする 6
7. Androidは top / bottom を基準にする • includeFontPadding で基準が変わる ◦ true: top / bottom ◦ false: ascent / descent • default: true のため、iOSとフォントの⾼さに差分が出る 7
8. プラットフォーム別の調整⽅法
9. Androidでの対処法 • includeFontPadding: false でiOSと⾼さをそろえる • lineHeightをfont sizeの1.2-1.5倍にする ◦ includeFontPadding: false すると、⾒切れることがある ◦ Material Design Guidelineに⽬安が書いてある • textAlignVertical: 'center'で 垂直中央揃え 9
10. iOSでの対処法 • 何もしなくて良さそうだが、調整必要なら以下を試みる • lineHeight を fontSize と同じ値にする ◦ textAlignVertical がiOSにはない ◦ fontに対しての上下の余⽩をタイトにして整える 10
11. 実例 11
12. まとめ • プラットフォームごとにテキストの取扱に差分があった • 垂直⽅向の中央揃えをするには、それぞれに適した対応が必要 ◦ 共通 ▪ フォントの⾼さをそろえる ◦ iOS ▪ lineHeight で垂直の余⽩を無くす (必要に応じて) ◦ Android ▪ textAlignVertical で中央揃え ▪ lineHeight で⾒切れを防ぐ 12