Skip to content

fix(toolbar): center CJK text vertically in tool buttons - #2064

Open
gamma6ray wants to merge 1 commit into
osfans:developfrom
gamma6ray:fix/toolbar-cjk-centering
Open

fix(toolbar): center CJK text vertically in tool buttons#2064
gamma6ray wants to merge 1 commit into
osfans:developfrom
gamma6ray:fix/toolbar-cjk-centering

Conversation

@gamma6ray

@gamma6ray gamma6ray commented Aug 4, 2026

Copy link
Copy Markdown

This is the second option. Both options (includeFontPadding=false, and this visual-bounds centering) work on VIVO OriginOS 6. This second option is the more robust one — it centers by the actual glyph bounds, but I don't have other OS to test with , e.g. LineageOS 23. Hope it helps.

Summary

Toolbar tool buttons using CJK labels (e.g. option_styles: ["中", "En"]) render the CJK glyph visually lower than latin text, so it does not line up with the surrounding icon buttons.

Root cause

The label TextView (ToolButton.kt) centers text by font metrics, but CJK glyphs occupy only part of the font box. With the default includeFontPadding = true (and even with it disabled), the visible 中 glyph sits below the box center because its visual bounds differ from the font metrics, and this differs per font/system.

Fix

Disable the extra font padding, then offset the label by the difference between the font-box center and the actual glyph bounds:

label.includeFontPadding = false
val fm = label.paint.fontMetrics
val bounds = Rect()
label.paint.getTextBounds(label.text.toString(), 0, label.text.length, bounds)
val offset = (fm.ascent + fm.descent) / 2f - (bounds.top + bounds.bottom) / 2f
label.translationY = offset

This computes the offset per glyph from the active typeface, so it centers any text visually regardless of font or system.

Verification

  • Reproduced the off-center 中 label on a clean build.
  • This fix centers it correctly. The first option (includeFontPadding = false + Gravity.CENTER) also works on VIVO OriginOS 6.
  • Only affects ContentType.TEXT tool buttons; icon buttons are untouched.

Closes #2062

@Bambooin

Bambooin commented Aug 5, 2026

Copy link
Copy Markdown
Collaborator

Seems that the patch couldn't fix the issue, I can still reproduce it with LineageOS 23.

TextView centers text by font metrics, but CJK glyphs occupy only part
of the font box, so labels like 中 sit visually lower than latin text.
Disable includeFontPadding and offset the label by the difference
between the font box center and the actual glyph bounds, so any text
centers visually regardless of font or system.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@gamma6ray
gamma6ray force-pushed the fix/toolbar-cjk-centering branch from f018b6c to e5a2a79 Compare August 5, 2026 18:32
@gamma6ray

Copy link
Copy Markdown
Author

This is the second option. Both options (includeFontPadding=false, and this visual-bounds centering) work on VIVO OriginOS 6. This second option is the more robust one — it centers by the actual glyph bounds, but I don't have other OS to test with , e.g. LineageOS 23. Hope it helps.

@Bambooin

Bambooin commented Aug 5, 2026

Copy link
Copy Markdown
Collaborator

Both options failed with LineageOS 23, please revert to the first option if the issue is fixed with your OS.

git reset --hard f018b6c322d427c43eeb55a504e5299068084d39
git push -f

The first option is more elegant than the second.

I found the regression with LineageOS too in #2062, maybe there is bug in LineageOS instead of Trime.

@WhiredPlanck

WhiredPlanck commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator

@Bambooin I've get the problem fixed and make more improvements on my local branch. This is a good patch and I may pick it to my commit, however I still want to submit my PR to fix it instead.

@WhiredPlanck

Copy link
Copy Markdown
Collaborator

The biggest cause of the issue is that unlike ImageView, when text size is fixed and paddings are too large, TextView will crop the text content, but ImageView will scale the drawable first. So the better way to fix the issue is to make TextView scaleable, i.e. replace normal TextView with AutoSacleTextView here, and then exclude font padding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toolbar「中」字垂直位置偏下

3 participants