search

madeleineostoja / rucksack

A little bag of CSS superpowers, built on PostCSS
https://www.rucksackcss.org
Other
1.85k stars 48 forks source link

Responsive typography + line height? #31

Closed DanielPintilei closed 7 years ago

DanielPintilei commented 8 years ago

Would it be a good idea? Something like: 

html {
    font-size: responsive 12px/1.4 21px/1.8;
}

or

html {
    line-height: responsive 1.4 1.8;
}

Unitless line height is fine, but if you want to set a specific line height for a specific font range, you have to do it without Rucksack, the result being unnecessary multiple media queries. I guess it wouldn't work just by adding the line height along font size, since that would result in line heights like 1.4654643?

madeleineostoja commented 8 years ago

How you'd do this is have Rucksack parse font: declarations, where you can define font-size/line-height shorthand.

Though I'm not sure what you're trying to achieve. By definition unitless line height is 'responsive'. Are there certain points where you want a different line height unit? How would rucksack know this?

DanielPintilei commented 8 years ago

Yes, I was talking about

certain points where you want a different line height unit

That's why I said that unitless line height works fine. But if you want to get artsy with the line height, rucksack can't help you. like when your font-size is 12px you want your line height to be 1.4 and when it's 21px, line height 1.8

How would rucksack know this?

By using something like

html {
font: responsive 12px/1.4 21px/1.8;
}

or

html {
line-height: responsive 1.4 1.8;

}

I guess

madeleineostoja commented 8 years ago

Seems the font shorthand processing wouldn't work because of this bug in Firefox. So the only option would be to add a new feature to postcss-responsive-type to parse line-height properties with the same logic. I probably don't have the time for this right now, and not sure if there's enough demand for it at the moment. But would probably welcome a PR if anyone's keen.

madeleineostoja commented 8 years ago

This feature has been added upstream in postcss-responsive-type. Just needs documentation.

yocontra commented 8 years ago

Any chance somebody can update the postcss-responsive-type dependency so we can start using this feature?

madeleineostoja commented 7 years ago

@contra sorry missed this, will bump it now and release a new version

kodekoder commented 7 years ago

So, is there a fix or not? I have issue with Firefox - Responsive doesn't work like it should!

madeleineostoja commented 7 years ago

This was released in the linked commit, you can use responsive line heights with new line height declarations