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
250
英語と日本語の文字をComposeでキレイに並べよう
TomoyaShibata
March 14, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
270
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
200
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
230
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
370
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.8k
生成AIによる情報システムへのインパクト
taka_aki
1
200
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
140
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
270
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
520
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
280
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Orchestrator
shlominoach
189
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Cult of Friendly URLs
andyhume
79
6.5k
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