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
240
英語と日本語の文字をComposeでキレイに並べよう
TomoyaShibata
March 14, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
150
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
300
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
930
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
asken AI勉強会(Android)
tadashi_sato
0
140
2025-06-26 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
240
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
220
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
120
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
150
Featured
See All Featured
Visualization
eitanlees
146
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
184
16k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Code Review Best Practice
trishagee
69
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for humans not robots
tammielis
253
25k
Producing Creativity
orderedlist
PRO
346
40k
Typedesign – Prime Four
hannesfritz
42
2.7k
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