https://kotlinlang.org logo
Join Slack
Powered by
#compose
:wave: If I have `includeFontPadding` set to `fals...
n
👋 If I have 
includeFontPadding
set to 
false
(I’m actually using Compose BOM 
2024.02
so this is supposedly not needed), why is my 
Text
adding paddings on top and bottom of the text? It’s driving me crazy 🤯 .
✅ 1
b
check the actual dependency versions being resolved (with 
--scan
) to see if the versions the BOM gives are the versions actually in use
n
Which command should I run with 
--scan
to check that? It’s happening with 
includeFontPadding = false
, anyway!
Yeah, dependencies are correct.
👍 1
v
what is the line height of your text style?
n
It’s 18.sp, and text size is 16.sp. As you can see, the space between lines is correct.
v
true
h
What is the 
lineHeightStyle
?
n
I tested both with nothing specified and:
Copy code
lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Proportional,
            trim = LineHeightStyle.Trim.None,
),
h
Can you also show how it looks when you have 3 lines?
n
It’s 4 lines, but I guess it doesn’t matter.
thank you color 1
So padding is surrounding the text. Line spacing is alright.
h
I'm still suspicious of the font file itself. Can you apply it on a 
TextPaint
and report what 
fontMetrics
it has?
n
Can you elaborate a bit on how to do that? 
Canvas
with 
drawText
in which I use a 
Paint
with this font family?
h
There's currently no API in Compose that gives you fontMetrics. You'll need to debug the app and read them directly from 
AndroidTextPaint.kt
with a breakpoint. 1. Find 
AndroidTextPaint.kt
in library sources. 2. Put a breakpoint on 
setColor
's first line. This should be 
if (color.isSpecified)
a. Guarantees that this breakpoint will pause the execution during draw phase when all TextPaint properties are finalized. 3. When this breakpoint is called for your text, check out 
this.fontMetrics
in debugger. a. Check what are 
ascent
,
descent
,
top
,
bottom
values Try to debug with minimum number of text composables on the screen to easily find the composable where this specific FontFamily is used. Or better just use it in every Text on the screen 🙂
n
Thanks very much for the in-deep explanation 🙂 This is the result.
image.png
b
(sorry for the delay, you've moved on, but jsut for closure I meant whatever gradle command you want to run: 
./gradlew build --scan
🙂 )
👌 1
gratitude thank you 1
h
as I suspected the font itself doesn't have any explicit padding (difference between top/ascent or bottom/descent). So toggling 
includeFontPadding
won't give you any difference.
are you able to share the font file?
n
pixeled.ttf
pixeled.ttf
Indeed!
h
I'll try to take a look soon
n
Thank you, man 🙇
c
yeah. i came here to say your font file might be borked. i had a similar issue and just asked my design team for an update font file and i think they just grabbed something from google fonts and the issue went away lol
n
This font is not held in Google Fonts, sadly. That's the first thing I wanted to try. Do you know if there's the possibility to "unbork" the font?
Or can I manually override the ascent/top or bottom/descent values in code?
🚫 1
😢 1
That means the only way to use this font is either: a. I find a file that is correctly created b. I play around with the non-removable padding , right?
g
I think you also can update the font itself
n
That sounds hard, tbh xD. Is that done in FontForge or something like that?
g
I'm not a font designer, but I indeed verified some issues with our custom font paddings using FontForge, but after this it was done by the design team, so not sure what they used
👍 1
n
Thanks for that. This font is not designed internally, so I can’t request modifications, sadly. Anyway, knowing that is a problem in the font, I’ll ping the design team and will work around it while the problem is fixed. Thanks everyone 🙂
52 Views
Open in Slack
PreviousNext
Powered by