question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Text] It should be possible to set a line-height for a Text component

See original GitHub issue

🚀 Feature request

It’s currently not possible to add a line-height value to a Text component without using exceptionallySetClassName. I think it would be help to have a lineHeight property added so that consumers can control the leading of their typography.

The values for the line height would need to be determined.

Motivation

The motivation comes from needing to add line height to copy rendered within an application.

Example

This feature could be used any time you want to use a Text component to render multiline copy.

Possible implementations

  • A lineHeight property could be an absolute value.
.lineHeight-small  { line-height: 1.2; }
.lineHeight-medium { line-height: 1.6; }
.lineHeight-large  { line-height: 2.0; }
  • A lineHeight property could work as a “multiplier” on the size prop.
.size-caption {
    font-size: var(--reactist-font-size-caption);
    line-height: var(--reactist-line-height-caption);
}

.line-height-caption-small {
    line-height: calc(var(--reactist-line-height-caption) - 0.2);
}

.line-height-caption-medium {
    line-height: var(--reactist-line-height-caption);
}

.line-height-caption-large {
    line-height: calc(var(--reactist-line-height-caption) + 0.2);
}

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
gnapsecommented, Feb 21, 2022

@tsamoudakis thanks for the follow-up. I do not recall having expressed any concerns about the feasibility to go forward with any typography styles in the short term. Maybe I was misunderstood, but on this particular topic I see little hurdles ahead, or none at all. It’s just a matter of making the time.

Right now, in this particular issue, the ball is in our court. We’ll ping you when we have the situation ready to try, either behind a feature flag, or on staging in Twist and Todoist for us to try before releasing.

1reaction
gnapsecommented, Feb 3, 2022

Paul, that’s all super clear. And yes, TD could be affected too, good point.

Anyway, about the approach you suggest, that could work. I was hoping to avoid introducing more feature flags and involving to have to do TD or TW releases. I’m still inclined to validate things on staging first.

Read more comments on GitHub >

github_iconTop Results From Across the Web

line-height - CSS: Cascading Style Sheets - MDN Web Docs
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.
Read more >
The ideal line length & line height in web design - Pimp my Type
Line height and line length are crucial if you want to set your text properly, and in this article and video will tell...
Read more >
How to Tame Line Height in CSS
When a browser encounters the line-height property, what it actually does is take the line of text and place it in the middle...
Read more >
How do set text line height in flutter? - Stack Overflow
Yes, there is also a height property in TextStyle which allows you to manually adjust the height of the line. Code Snippet Text('Hey...
Read more >
Set a default line height | Webflow University
Changing the line height on a text element will only affect its text content. It overrides the styles that are coming from the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found