SUBSCRIBE NOW

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

Baseline Text

Author: Tad Fisher

Wrapper for the Text element to add additional padding after the last baseline such that the height of the last line of text matches the style's lineHeight

  
          /**
        
           * Wrapper for the [Text] element which adds additional padding after the last baseline
        
           * such that the height of the last line of text matches the style's
        
           * [lineHeight][TextStyle.lineHeight].
        
           */
        
          @Composable
        
          fun BaselineText(
        
              text: String,
        
              modifier: Modifier = Modifier,
        
              color: Color = Color.Unspecified,
        
              fontSize: TextUnit = TextUnit.Unspecified,
        
              fontStyle: FontStyle? = null,
        
              fontWeight: FontWeight? = null,
        
              fontFamily: FontFamily? = null,
        
              letterSpacing: TextUnit = TextUnit.Unspecified,
        
              textDecoration: TextDecoration? = null,
        
              textAlign: TextAlign? = null,
        
              lineHeight: TextUnit = TextUnit.Unspecified,
        
              overflow: TextOverflow = TextOverflow.Clip,
        
              softWrap: Boolean = true,
        
              maxLines: Int = Int.MAX_VALUE,
        
              inlineContent: Map<String, InlineTextContent> = mapOf(),
        
              onTextLayout: (TextLayoutResult) -> Unit = {},
        
              style: TextStyle = LocalTextStyle.current
        
          ) = BaselineText(
        
              AnnotatedString(text),
        
              modifier,
        
              color,
        
              fontSize,
        
              fontStyle,
        
              fontWeight,
        
              fontFamily,
        
              letterSpacing,
        
              textDecoration,
        
              textAlign,
        
              lineHeight,
        
              overflow,
        
              softWrap,
        
              maxLines,
        
              inlineContent,
        
              onTextLayout,
        
              style
        
          )
        
          /**
        
           * Wrapper for the [Text] element which adds additional padding after the last baseline
        
           * such that the height of the last line of text matches the style's
        
           * [lineHeight][TextStyle.lineHeight].
        
           */
        
          @Composable
        
          fun BaselineText(
        
              text: AnnotatedString,
        
              modifier: Modifier = Modifier,
        
              color: Color = Color.Unspecified,
        
              fontSize: TextUnit = TextUnit.Unspecified,
        
              fontStyle: FontStyle? = null,
        
              fontWeight: FontWeight? = null,
        
              fontFamily: FontFamily? = null,
        
              letterSpacing: TextUnit = TextUnit.Unspecified,
        
              textDecoration: TextDecoration? = null,
        
              textAlign: TextAlign? = null,
        
              lineHeight: TextUnit = TextUnit.Unspecified,
        
              overflow: TextOverflow = TextOverflow.Clip,
        
              softWrap: Boolean = true,
        
              maxLines: Int = Int.MAX_VALUE,
        
              inlineContent: Map<String, InlineTextContent> = mapOf(),
        
              onTextLayout: (TextLayoutResult) -> Unit = {},
        
              style: TextStyle = LocalTextStyle.current
        
          ) {
        
              val resolvedLineHeight = lineHeight.takeOrElse { style.lineHeight }
        
              val resolvedFontSize = fontSize.takeOrElse { style.fontSize }
        
              val paddedModifier = if (resolvedLineHeight.isSpecified && resolvedFontSize.isSpecified) {
        
                  with(LocalDensity.current) {
        
                      val lineHeightDp = resolvedLineHeight.toDp()
        
                      val fontSizeDp = resolvedFontSize.toDp()
        
                      Modifier.paddingFromBaseline(
        
                          top = fontSizeDp,
        
                          bottom = lineHeightDp - fontSizeDp
        
                      )
        
                  }
        
              } else {
        
                  Modifier
        
              }
        
              Text(
        
                  text,
        
                  modifier = modifier.then(paddedModifier),
        
                  color,
        
                  fontSize,
        
                  fontStyle,
        
                  fontWeight,
        
                  fontFamily,
        
                  letterSpacing,
        
                  textDecoration,
        
                  textAlign,
        
                  lineHeight,
        
                  overflow,
        
                  softWrap,
        
                  maxLines,
        
                  inlineContent,
        
                  onTextLayout,
        
                  style
        
              )
        
          }

view raw BaselineText.kt hosted with ❤ by GitHub

Have a project you'd like to submit? Fill this form, will ya!

If you like this snippet, you might also like:

Maker OS is an all-in-one productivity system for developers

I built Maker OS to track, manage & organize my life. Now you can do it too!

Get it now

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets

	/**
	* Wrapper for the [Text] element which adds additional padding after the last baseline
	* such that the height of the last line of text matches the style's
	* [lineHeight][TextStyle.lineHeight].
	*/
	@Composable
	fun BaselineText(
	text: String,
	modifier: Modifier = Modifier,
	color: Color = Color.Unspecified,
	fontSize: TextUnit = TextUnit.Unspecified,
	fontStyle: FontStyle? = null,
	fontWeight: FontWeight? = null,
	fontFamily: FontFamily? = null,
	letterSpacing: TextUnit = TextUnit.Unspecified,
	textDecoration: TextDecoration? = null,
	textAlign: TextAlign? = null,
	lineHeight: TextUnit = TextUnit.Unspecified,
	overflow: TextOverflow = TextOverflow.Clip,
	softWrap: Boolean = true,
	maxLines: Int = Int.MAX_VALUE,
	inlineContent: Map<String, InlineTextContent> = mapOf(),
	onTextLayout: (TextLayoutResult) -> Unit = {},
	style: TextStyle = LocalTextStyle.current
	) = BaselineText(
	AnnotatedString(text),
	modifier,
	color,
	fontSize,
	fontStyle,
	fontWeight,
	fontFamily,
	letterSpacing,
	textDecoration,
	textAlign,
	lineHeight,
	overflow,
	softWrap,
	maxLines,
	inlineContent,
	onTextLayout,
	style
	)

	/**
	* Wrapper for the [Text] element which adds additional padding after the last baseline
	* such that the height of the last line of text matches the style's
	* [lineHeight][TextStyle.lineHeight].
	*/
	@Composable
	fun BaselineText(
	text: AnnotatedString,
	modifier: Modifier = Modifier,
	color: Color = Color.Unspecified,
	fontSize: TextUnit = TextUnit.Unspecified,
	fontStyle: FontStyle? = null,
	fontWeight: FontWeight? = null,
	fontFamily: FontFamily? = null,
	letterSpacing: TextUnit = TextUnit.Unspecified,
	textDecoration: TextDecoration? = null,
	textAlign: TextAlign? = null,
	lineHeight: TextUnit = TextUnit.Unspecified,
	overflow: TextOverflow = TextOverflow.Clip,
	softWrap: Boolean = true,
	maxLines: Int = Int.MAX_VALUE,
	inlineContent: Map<String, InlineTextContent> = mapOf(),
	onTextLayout: (TextLayoutResult) -> Unit = {},
	style: TextStyle = LocalTextStyle.current
	) {
	val resolvedLineHeight = lineHeight.takeOrElse { style.lineHeight }
	val resolvedFontSize = fontSize.takeOrElse { style.fontSize }
	val paddedModifier = if (resolvedLineHeight.isSpecified && resolvedFontSize.isSpecified) {
	with(LocalDensity.current) {
	val lineHeightDp = resolvedLineHeight.toDp()
	val fontSizeDp = resolvedFontSize.toDp()
	Modifier.paddingFromBaseline(
	top = fontSizeDp,
	bottom = lineHeightDp - fontSizeDp
	)
	}
	} else {
	Modifier
	}
	Text(
	text,
	modifier = modifier.then(paddedModifier),
	color,
	fontSize,
	fontStyle,
	fontWeight,
	fontFamily,
	letterSpacing,
	textDecoration,
	textAlign,
	lineHeight,
	overflow,
	softWrap,
	maxLines,
	inlineContent,
	onTextLayout,
	style
	)
	}