Supporting rem as fontSize and lineheight
LukeFinch opened this issue · comments
I'm looking into supporting 'rem' as a unit for our design system, and migrating away from pixel values.
Currently, if I want to do that, I have to override the outputs provided from capsize like so:
export const textCrop = ({
lineHeight,
fontSize,
fontMetrics,
}: TextCropProps) => {
const fontSizeAsNumber = parseFloat(fontSize);
const leading = lineHeight * fontSizeAsNumber;
const capsizeStyles = createStyleObject({
fontSize: fontSizeAsNumber,
leading,
fontMetrics,
});
capsizeStyles.fontSize = fontSize;
capsizeStyles.lineHeight = lineHeight.toString();
return capsizeStyles;
};
with arguments as an example:fontSize: '2rem'
lineHeight: 1.5
Looking into the source code - it seems like pixels are only needed for rounding – I assume if I wanted to use capHeight as a pixel value, and lineGap?
Is there any potential issue with me:
a) passing values in as rem - my assumption is not due to the relative nature of all the calculations
b) overriding the output back to a rem unit?
I am thinking about same thing, and I lean towards CSS calc()
for font-size
property, instead of compile-time computations over values normalised to px
.
@LukeFinch I've successfully reimplemended computations in CSS calc, discovered workaround is to pass values as numbers (implied rem), storing as CSS variables and to convert into units only after computation - exactly at the assignment. With this approach CSS-only rem solution is possible: https://jsbin.com/danobedoye/11/edit?html,css,output
Works only in Safari (possibly due to calc()
nesting limits)