Discussion
Loading...

Discussion

  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Lea Verou, PhD
@leaverou@front-end.social  ·  activity timestamp 4 days ago

At the CSS WG meeting, we're discussing possibly natively doing fit-text in CSS. Send us your use cases (with screenshots/links)!

Do you ever need to fit multi-line text?
Do you ever need to fit non-text inline elements (e.g. icons)?
Do you adjust font-size, letter-spacing, or both?

  • Copy link
  • Flag this post
  • Block
Amelia Bellamy-Royds
@AmeliaBR@front-end.social replied  ·  activity timestamp 2 days ago

@leaverou In addition to adjust font-size & letter-spacing, it should be possible to adjust by variable font axes (specifically, font width).

I don't really like it, but SVG text also has the option to stretch/squish glyphs (one-dimensional scale transform). For completeness, a CSS feature should be able to include that (so that the SVG feature can be redefined/re-implemented to use the CSS one).

But either way: author should be able to specify which factors are adjustable & to which degree.

  • Copy link
  • Flag this comment
  • Block
Andrew Douglass
@ardouglass@mastodon.social replied  ·  activity timestamp 4 days ago

@leaverou I had a project where multi-line text fitting would’ve been great but I had to scrap the idea because a JS solution was out of scope and I couldn’t find any other way.

Specifically, something where the text would be sized to fit a specified number of lines while the inline size of the text’s container changed.

For single line fit-text, I’ve used the registered custom properties hack documented at https://kizu.dev/fit-to-width/, but a non-hacky native solution would be much preferable.

  • Copy link
  • Flag this comment
  • Block
Jeffrey Yasskin
@jyasskin@hachyderm.io replied  ·  activity timestamp 4 days ago

@leaverou Why is the WG discussing a solution before it has a list of problems?

  • Copy link
  • Flag this comment
  • Block
psarant
@psarant@mas.to replied  ·  activity timestamp 4 days ago

@leaverou Just trying to make cliche PowerPoint-like presentations with #11ty and some CSS. It started with page transitions, and now I wish I could adjust the font size based on how many bullet points are in the text area.

  • Copy link
  • Flag this comment
  • Block
Log in

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.0 no JS en
Automatic federation enabled
  • Explore
  • About
  • Members
  • Code of Conduct
Home
Login