Re: Request for adjustable font-size: line-fit

On 20.08.2013, at 14:32, Lea Verou <lea@verou.me> wrote:

> What happens when the line width depends on the font-size, such as when width is specified in ems, ch or ex?

Hi Lea,

this should not be possible by definition. Normally it takes the width of the parent element (=container) and  
you will get the proper dimensions on your parent while getting a big variable typo on your heading.
The code should look like:

    element {
        width: 20em;
    }

    h1 {
        font-size: line-fit;
        min-font-size: 14px;
        max-font-size: 48px;
    }

But given your example:

    h1 {
        width: 20em;
        font-size: line-fit;
        min-font-size: 14px;
        max-font-size: 48px;
    }

the user agent will try to set font-size first, then calculates the element's width. 
This is indeed a problem and therefore needs attention. 

Can you think of a how this can be solved the easiest way for a browser 
(I'm personally missing some background information to know how they calculate their styles 
and can get styles from parent / root in such cases).

Also it would be a possibility that the browser ignores the `line-fit` argument when it's used along with 
`width` on the same element.

If possible you can also go the inheritance way as already proposed but I do think this
overcomplicates things.

Happy to hear more thoughts about it and feedback if it's possible (at least it is in JS ;)).

-----
-Anselm | Anselm Hannemann | @helloanselm | hellonaselm.com

> – Lea Verou • lea.verou.me • @leaverou
> 
> On Aug 19, 2013, at 10:23, Anselm Hannemann <info@anselm-hannemann.com> wrote:
> 
>> Hi,
>> 
>> I wonder if it makes sense and would be possible to implement a technique that 
>> adjusts the font-size to fit into an element's line-width.
>> 
>> This jQuery plugin covers the use-case: http://www.zachleat.com/web/bigtext-makes-text-big/
>> Unfortunately it is bound to jQuery and also causes massive repaints in browsers.
>> 
>> This is why I think it should be done natively within CSS like:
>> 
>>  font-size: line-fit;
>> 
>> Therefore we would need also the following sub-attributes to control (min | max) of the font-size:
>> 
>>  min-font-size: 1em;  
>>  max-font-size: 3em;
>> 
>> I already found some indicators that this topic has already been raised some time ago but didn't find 
>> any accurate or clarifying information about it [1] [2].
>> 
>> [1] http://lists.w3.org/Archives/Public/www-style/1999Mar/0086.html     
>> [2] http://my.safaribooksonline.com/book/web-development/css/0130092789/text-properties/ch10lev1sec12
>> 
>> If you have any hint or opinion on the topic (either way) I would be happy to know about it.
>> 
>> Cheers, 
>> *Anselm | Anselm Hannemann | @helloanselm | helloanselm.com
>