Shared publicly  - 
I want to tell the browser: make this text as big as possible without scrolling.
If I have a block of text that I want to expand to fill the screen, there ought to be some way to specify this in HTML. Specifically, I want to put contra dance calling cards on my phone. I definite...
James Babcock's profile photoJeff Kaufman's profile photoChris Lahey's profile photo
I'm pretty sure there's no way to do it with HTML and CSS alone; the text kerning and wrapping characteristics are complicated enough that any HTML+CSS implementation would have the browser doing a similar loop behind the scenes, and CSS seems to mostly avoid that. You can speed it up by using a binary search instead of small increments (with some possible caveats where it's not monotonic), but I'm pretty sure there's no closed-form solution.
+James Babcock I think the constraints for tables may be a similar level of complexity, though I'm not sure.  Still, the browser doing the looping and solving ought to be better than me doing it in javascript.

The javascript solution is instant, even on my phone, so I don't really /need/ something else.  I just feel a bit icky doing this.
+Lucas Sanders "It looks like manual line wrapping is appropriate for this use case"

I'd like this to work on things with different aspect ratios.  It's nice that the current solution looks good on my laptop as well as my phone.  The other problem with manual line breaking is then I need to be testing how each one looks, instead of just letting the browser sort it out.
This is basically what my code for fitting text on my cards looks like, though I multiple the font size by  .7 or something instead of subtracting a value.  Mine actually doesn't do any wrapping, which I think I'm going to add next.  Also, I need to do a bunch of work on my card database.  Perhaps I'll go work on that.

How does your database store the dances?  Are they text or semantic?
Add a comment...