based on height?

[yocontra]

Is there any way to configure this so the font sizing is based on the height and not the width?

[madeleineostoja]

You could make it fluid with vh units, but there would be no way to set a range between which it's fluid, so you'd get ridiculous font sizes on very large and very small screens. You could use the (horizontal) media queries as a kind of proxy for scren size, but that's a nasty hack at best.

So no, not really possible unfortunately.

[yocontra]

@seaneking Would you be open to adding this/accepting a PR for it?

[madeleineostoja]

It would be a broken feature, so probably not unfortunately

[yocontra]

@seaneking Okay maybe I'm stupid or something, but I'm still not understanding why you think this is impossible to do. The current method uses vw for scaling and media queries with max-width, what would be the issue with using vh for scaling and max-height in media queries?

html {
  font-size: responsive-height 12px 21px; /* min-size, max-size */
  font-range: 420px 1280px; /* viewport heights between which font-size is fluid */
}

html {
  font-size: calc(12px + 9 * ((100vh - 420px) / 860));
}

@media screen and (max-height: 420px) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-height: 1280px) {
  html {
    font-size: 21px;
  }
}

[yocontra]

Here is a codepen demonstrating this working: https://codepen.io/anon/pen/xRVxOg

[madeleineostoja]

Oh derp. Sorry pre-coffee. Okay might accept a PR, depending on the interface we came up with for it. Just very cautious of feature bloat.

Cleanest would likely be another prop that sets orientation, and an additional optional arg on the shorthand prop. Unless you have thoughts for an alternate interface?

That's getting pretty messy though. Would be keen to get feedback from others on how important a feature this is.

[yocontra]

Example use case: Sidebar w/ big text icons. On smaller laptop screens you want the icon size to shrink, and have a max/min font-size.

Should def get feedback on API, I think what you said about an orientation flag is great.