Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support removing spacing between paragraphs #3866

Closed
sunny-chung opened this issue Oct 26, 2023 · 2 comments · Fixed by JetBrains/compose-multiplatform-core#897
Closed

Support removing spacing between paragraphs #3866

sunny-chung opened this issue Oct 26, 2023 · 2 comments · Fixed by JetBrains/compose-multiplatform-core#897
Labels
enhancement New feature or request

Comments

@sunny-chung
Copy link

In Jetpack Compose, LineHeightStyle can be specified as an option to ParagraphStyle to remove additional spaces between paragraphs. According to the documentation:

trim feature is available only when PlatformParagraphStyle.includeFontPadding is false.

https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/LineHeightStyle

In Compose Desktop, setting LineHeightStyle has no effect, and there is no includeFontPadding in the PlatformParagraphStyle class.

This is one of the blockers of implementing a soft-wrap-enabled code editor with line numbers.

@sunny-chung sunny-chung added enhancement New feature or request submitted labels Oct 26, 2023
@dima-avdeev-jb
Copy link
Contributor

Thanks for Issue. We will discuss it in our team.

MatkovIvan added a commit to JetBrains/compose-multiplatform-core that referenced this issue Nov 13, 2023
## Proposed Changes

- Set `ParagraphStyle.heightMode` based on `LineHeightStyle.Trim` value
- Align default behavior with Android
- Avoid using `StrutStyle` - it doesn't allow the line height trimming.
Set `height` via `TextStyle` instead
- Cache and post-process `lineMetrics`
- Port tests from an Android source set

## Behaviour change

In case of larger `lineHeight`, both paddings are trimmed by default to
match the Android behaviour.

## Testing

Test: run tests from `DesktopParagraphIntegrationLineHeightStyleTest`

```kt
Row(horizontalArrangement = Arrangement.spacedBy(5.dp)) {
    for (lineHeightStyle in listOf(
        null,
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.Both),
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.FirstLineTop),
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.LastLineBottom),
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.None),
    )) {
        Text("Line 1\nLine 2",
            modifier = Modifier.background(Color.Gray),
            style = TextStyle(
                fontSize = 18.sp,
                lineHeight = 50.sp,
                lineHeightStyle = lineHeightStyle
            )
        )
    }
}
```

Before | After
--- | ---
<img width="285" alt="Screenshot 2023-11-08 at 13 38 08"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/2c7fbddc-dac9-408e-ad53-cedc361fe777">
| <img width="285" alt="Screenshot 2023-11-08 at 13 37 45"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/4fe4d7c9-a414-4338-885f-6701e6daecf1">



## Issues Fixed

Fixes (partially)
JetBrains/compose-multiplatform#2602
Fixes JetBrains/compose-multiplatform#3866
mazunin-v-jb pushed a commit to JetBrains/compose-multiplatform-core that referenced this issue Dec 7, 2023
## Proposed Changes

- Set `ParagraphStyle.heightMode` based on `LineHeightStyle.Trim` value
- Align default behavior with Android
- Avoid using `StrutStyle` - it doesn't allow the line height trimming.
Set `height` via `TextStyle` instead
- Cache and post-process `lineMetrics`
- Port tests from an Android source set

## Behaviour change

In case of larger `lineHeight`, both paddings are trimmed by default to
match the Android behaviour.

## Testing

Test: run tests from `DesktopParagraphIntegrationLineHeightStyleTest`

```kt
Row(horizontalArrangement = Arrangement.spacedBy(5.dp)) {
    for (lineHeightStyle in listOf(
        null,
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.Both),
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.FirstLineTop),
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.LastLineBottom),
        LineHeightStyle(LineHeightStyle.Alignment.Proportional, LineHeightStyle.Trim.None),
    )) {
        Text("Line 1\nLine 2",
            modifier = Modifier.background(Color.Gray),
            style = TextStyle(
                fontSize = 18.sp,
                lineHeight = 50.sp,
                lineHeightStyle = lineHeightStyle
            )
        )
    }
}
```

Before | After
--- | ---
<img width="285" alt="Screenshot 2023-11-08 at 13 38 08"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/2c7fbddc-dac9-408e-ad53-cedc361fe777">
| <img width="285" alt="Screenshot 2023-11-08 at 13 37 45"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/4fe4d7c9-a414-4338-885f-6701e6daecf1">



## Issues Fixed

Fixes (partially)
JetBrains/compose-multiplatform#2602
Fixes JetBrains/compose-multiplatform#3866
@ionull
Copy link

ionull commented Mar 22, 2024

Hi, does it work on AnnotatedString?
withStyle( ParagraphStyle( textIndent = TextIndent( firstLine = 0.sp, restLine = 16.sp ), lineHeight = 16.sp, platformStyle = PlatformParagraphStyle( includeFontPadding = false ), lineHeightStyle = LineHeightStyle( LineHeightStyle.Alignment.Center, LineHeightStyle.Trim.Both ) ) ) { content() }

I tried with this but there is still margin after every paragraph.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants