Support calculating based on fontSize
See original GitHub issueCapsize currently accepts inputs which act as constraints for the algorithm generating the styles. Primarily, those constraints are capHeight
& leading
*:
const styles = capsize({ fontMetrics, leading: 12, capHeight: 10 });
However, my project has a design which specifies a set of fontSize
& lineHeight
combos:
fontSize |
lineHeight |
---|---|
12px |
20px |
14px |
22px |
20px |
28px |
I’d like to be able to use capsize to generate the correct style object given those inputs as constraints:
const styles = capsize({ fontMetrics, fontSize: 12, lineHeight: 20 });
I did a rough draft in https://github.com/seek-oss/capsize/pull/3, but it’s out of date and misses a few cases like snapping to grid.
*
(leading
can also be specified as gap
, but I’ll treat that as a variation of leading
here)
Issue Analytics
- State:
- Created 3 years ago
- Reactions:8
- Comments:6 (4 by maintainers)
Top Results From Across the Web
calc() on font-size - changing font size based on container ...
Font-size is calculated with available size using a function that is not perfect, but may be adjusted to work well in some cases....
Read more >Font size calculator
The Font Size Calculator is designed to make it easier to identify inclusive font sizes in compliance with the German DIN 1450 standard...
Read more >font-size - CSS: Cascading Style Sheets - MDN Web Docs
The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length>...
Read more >Simple Responsive Font Size Calculator
Simple Responsive Font Size Calculator. All values displayed in pixels. Input your body copy size in the yellow field, the rest of the...
Read more >Calculate ideal font size so text can fit into cell
Generally it is not advisable to size fonts based on width unless you are willing to wrap the text. Use a '...' or...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@apkoponen I caught up with @jesstelford and feel that the issues i found previously may no longer be a problem.
Planning to include
fontSize
support, just working on getting the package published and initial documentation first.Thanks to @jesstelford for helping out, this is live on the site now 👏