Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
英語と日本語の文字をComposeでキレイに並べよう
Search
TomoyaShibata
March 14, 2025
Technology
1
200
英語と日本語の文字をComposeでキレイに並べよう
TomoyaShibata
March 14, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1k
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
120
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
15
4.5k
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
760
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
120
Dynamic Reteaming And Self Organization
miholovesq
3
650
テストって楽しい!開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
aiandrox
0
110
3D生成AIのための画像生成
kosukeito
2
310
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
160
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
nwiizo
7
1.2k
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
110
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
5.9k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Site-Speed That Sticks
csswizardry
5
500
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Transcript
英語と日本語の文字を Composeでキレイに並べよう id:bps_tomoya / @tomoya_shibata 2025/03/14 DroidKaigi.collect { #17@Tokyo }
1
自己紹介 • バトルプログラマー柴田智也 ◦ id:bps_tomoya ◦ @tomoya_shibata • 株式会社はてな •
AndroidときどきiOS 2
3 2つのTextが 横に並ぶ実装を触っていた ある日
2つのTextを横に並べる • ちょっとしたラベル、バッジのような表示が欲しい • それぞれ背景(あるいは枠線など)を持っている • 短い文字列が2つ並ぶ、とてもありふれた要件 4
実装はこんな感じ 5
これで問題ないのでは 🤔 6
日本語に対して英語がちょっと浮いている 7
8 それぞれの Textのベースラインを 揃えたい
Modifier.alignByBaseline() 9 • Rowの中で使える • 設定された要素同士のベースラインを揃える • Text以外にも色々使える
こんな感じ 10
うん? 11
うん? 12 ベースラインは揃った
うん? 13 代わりにTextそのものがズレてしまった
背景色を持っていたりするとうまくいかない 14 • 逆にいえば背景色など無ければこれで大丈夫 • ベースラインがあらかじめ揃えられた日本語・英語の フォントをアプリに入れる? • それともText要素のサイズを計測して差分を埋める? •
要件に対して解決方法がちょっと派手
15 LineHeightStyle API
LineHeightStyle API • 行の中での配置や余白の取 り方を指定できる • Compose 1.2.0+ 16 https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/LineHeightStyle
LineHeightStyle.Alignment • 行の高さの中で文字をどう配置するか • Top ◦ 下にスペースを入れて上に詰める • Bottom ◦
上にスペースを入れて下に詰める • Proportional(デフォルト) ◦ フォントが持っているメトリクスを 元にスペース配分する • Center ◦ 上下に同量のスペースを入れる 17 https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b
LineHeightStyle.Alignment 18 • 0~1または-1fの値を渡すこともできる • 使う機会は少ないかも
LineHeightStyle.Trim • 1行目と最終行に含まれるスペースを取 り除くかどうか • FirstLineTop ◦ 1行目の上部分をtrimする • LastLineBottom
◦ 最終行の下部分をtrimする • None ◦ なにもtrimしない • Both(デフォルト) ◦ FirstLineTop/Bottomの両方 19 https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b
LineHeightStyle.Mode 20 • 行の高さがシステム推奨値より小さいときどうするか • Fixed(デフォルト) ◦ 指定された値を優先 • Minimum
◦ システム推奨値を優先 • Compose 1.8.0-beta03+ ◦ 今回のテーマでは登場しませんが、ご紹介まで
いま解決したいのは 21 • 英語と日本語のベースラインを揃えたい • フォントメトリクスで配置されるといい ◦ Alignment.Proportional(デフォルト) • 上下の余白を取り除かれるのは困る
◦ Trim.None
22 今回は Alignment.Proportional Trim.None の組み合わせがよさそう
こんな感じ 23
どうかな? 24
よさそう! 25
行が複数になると分かりやすい Trim.Both(デフォルト) Trim.None 26
まとめ • ベースラインを揃えたいときは Modifier.alignByBaseline • 背景色があるなど場面によっては上手くいか ないパターンも • LineHeightStyle APIを使って調整しよう
27