chakra-ui-vue
chakra-ui-vue copied to clipboard
chakra-ui
[Typography]: Tame text baseline for predictable line-height and leading browser support.
Is your feature request related to a problem? Please describe.
Browsers natively do not implement a predictable "box" model for text elements.
In order to maintain a clear and consistent UI patterns for text components, like the CText and CHeading components ought to sit on the same baseline. Browsers typically implement a vertical padding around the text when we set the line-height property.
The result of this is that the text doesn't really sit on the baseline and there is a spacing both above and below the text.
Describe the solution you'd like A clear and concise description of what you want to happen.
All text should sit on the baseline. Ascenders and descenders should not influence the size of the vertical "padding" in the default line box.
Below is the desired result:
Additional context
I can try working on this.
However, the basekick formula requires gridRowHeight and typeRowSpan value. Do we have a good reference value for those?
Hey @Namchee !Thanks for taking this on.
🤔 I currently don't know a lot about basekick's formula. So I don't yet know what the gridRowHeight and typeRowSpan are. Are these CSS properties? I couldn't find anything about them with a brief google search
Actually, those variables come from the link you references above, but here's the quick link.
In the browser, it looks like this
Basically, those two variables control how much red lines to be used in the text, which affects line-height for that element.
Actually, capsize is a good and easier alternative than implementing the basekick formula ourselves IMO (keep in mind that we need to add 2 extra dependencies for this).
UPDATE 8/19: Or, we can just wait for this
After a lot of experiments, I think I can implement this feature with 1 extra library. However, my solution only works on normal system font-stack (system-ui) since font family runtime detection is unsupported at the moment.
If you still agree on that, can I submit a PR for this?