Re: Why not max/min-font-size? & extend them to other properties of sizes

On 2/07/2014 2:45 PM, Bruno Racineux wrote:
>
> On 7/1/14 5:23 AM, "Alan Gresley" <alan@css-class.com> wrote:
>
>> [snip]
>>
>> What is imported is the *minimum font size*
>> setting. The text that reads "Therapy" appears on a new line when the
>> minimum font size setting is 14px. This happens in both Firefox and
>> Chrome. What you believe is fine at 16px is only fine at a minimum font
>> size setting of 13px.
>
> Correct, as I didn't initially factor or plan for a min size of 14px. But
> again, a minimum font size setting overrides everything, just like 'Text
> Zoom Only'. The same would happen even if that font was set in px.

What would happen the same and what font is being set in px?


> Which is to me another good use case for max/min-font-size restraints.

You have not provided a serious enough reason for max/min-font-size 
restraints. Also I don't believe you understand how the default font 
size setting of 16px works with the unit em.

If the default font size setting of my browser is set at 16px, what size 
will the text be (in pixels) for the <p> with the below code?

p {
   font-size: 12px;
   max-font-size: 1em;
   min-font-size: 1em;
}


If the default font size setting of my browser is set at 16px, what size 
will the text be (in pixels) for the <h2> in the below?

<style type="text/css">
   div { font-size: 0.75em }
   div h2 { font-size: 200% }
</style>

<div><h2>A header</h2></div>


>>> However I can't prevent it to break under 'Zoom Text Only' in FF/Safari
>>> *unless* I apply a 'px !important' rule for each text nodes.
>>> (since !important pixel rule are not affected by 'Zoom Text Only').
>>> But applying '!important' px rules is far from being an attractive
>>> option.
>>
>> This is not true.
>
> It's true. Let me rephrase in a shorter sentence: HTML Text set in px will
> scale with 'Zoom Text Only' unless set as !important;

Can you please provide a test case to prove this?


>>> I technically can use Javascript using the detected 'Zoom Text Only'
>>> scale
>>> and dynamically rescale. But I'd much prefer a css solution to avoid
>>> the text from overflowing its initial container.
>>
>> The CSS solution is to not use relative units with absolute units.
>
> Doing so allows for a convenient scaling of a container's children text
> elements, at the parent level, for various Media Query break-points.
>
> My mix of both isn't an issue.

Well it is the thing that is breaking your layout.

> The result would be identical with
> absolute units in that header of mine.

This is not true. Please load this code in Firefox.

<style type="text/css">
   h2 { background:lime; width: 165px; font-family: "Time New Roman";}
   #a { font-size: 13px }
   #b { font-size: 0.8em }
</style>

<h2 id="a">A header with some extra text</h2>
<h2 id="b">A header with some extra text</h2>

Now please change the browser default font size setting to 20px. Can you 
explain to me why the <h2> in absolute units (e.g. 13px) is now smaller 
than my relative unit (e.g. 0.8em)?


>  In that, 'Zoom Text Only' and
> 'minimum font size setting' always re-scale all units.

This is not true. Can you please load the below code and set the minimum 
font size setting to 72px. Can you explain to me why 'Zoom Text Only' 
fails to do anything?

<h2>A header</h2>


Do you know what the User Agent Style Sheet Default is for a <p>?

Do you know what the User Agent Style Sheet Default is for a <h2>?

Do you know what the User Agent Style Sheet Default is for a <h1>?


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 2 July 2014 06:45:12 UTC