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
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.1k
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
Agentic Workflowという選択肢を考える
tkikuchi1002
1
530
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
Postman AI エージェントビルダー最新情報
nagix
0
110
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
120
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
580
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
350
エンジニア向け技術スタック情報
kauche
1
270
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Code Reviewing Like a Champion
maltzj
524
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building an army of robots
kneath
306
45k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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