https://kotlinlang.org logo
#compose
Title
# compose
p

Pavel Marchenko

11/13/2020, 1:45 PM
Hi all, is there a way to apply different 'lineHeight' to a specific region of the text inside [Text] composable?
z

Zach Klippenstein (he/him) [MOD]

11/13/2020, 3:42 PM
Use the
Text
overload that takes an
AnnotatedString
, and then you can customize
lineHeight
as much as you want using `ParagraphStyle`s
p

Pavel Marchenko

11/13/2020, 3:56 PM
thank you for your response! I'm already using
AnnotatedString
with
SpanStyle
and
ParagraphStyle
. The problem I'm trying to solve is illustrated on the screenshot below. I was able to achieve '1' variation, but I have a problem achieving variation '2'. I have tried few different approaches, and seems that I'm stuck at the moment. I'm setting different bg color using
SpanStyle
but it is applied to the whole line height, so my idea was to decrease line height for highlighted keywords but seems that it is not possible with
SpanStyle
and
ParagraphStyle
is not an option as it will introduce a line break
z

Zach Klippenstein (he/him) [MOD]

11/13/2020, 4:08 PM
The problem is the shaded backgrounds behind the monospace text are too tall, right? Yea, I’m not surprised you can’t set a custom paragraph style on one word in a paragraph. Another approach would be to get the
TextLayoutResult
from the
Text
composable, calculate the positions of the words you care about, then draw the backgrounds yourself so you have full control.
🙇‍♂️ 2