W3C home > Mailing lists > Public > www-style@w3.org > August 2013

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

From: Anselm Hannemann <info@anselm-hannemann.com>
Date: Tue, 20 Aug 2013 15:29:51 +0200
Cc: "www-style@w3.org List" <www-style@w3.org>
Message-Id: <CF15DB5E-10E2-47C3-BA6C-B2E6041C815D@anselm-hannemann.com>
To: Lea Verou <lea@verou.me>
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
> 


Received on Tuesday, 20 August 2013 13:30:19 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:33 UTC