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

On 7/1/14 11:44 PM, "Alan Gresley" <alan@css-class.com> wrote:

>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?

"The text that reads "Therapy" appears on a new line"

as implied from your sentence.

>> 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.

Perhaps because you are stuck in a mindset of not combining em and px.
I do understand. Not going to answer a css kindergarden quiz for your
indulgence to prove it, sorry.

>>>> 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?

Ok You are correct here,
I re-tested and my reference to !important was wrong.
!important rule in absolute *are also* affected by 'Zoom Text Only'

Thought I would probably use an !important rule override in order to
rescale them up or down with javascript, using the detected 'Zoom Text
Only' ratio.

>>>> 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.

No it's not.
Again "Text Zoom Only" break layouts no matter what unit you use.

>
>> 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)?

I don't need to load this. You are patronizing me with css 101 here.

Element font sizes inherit their parent. The fact that I use ems inside a
16px base container prevent those from scaling to default font size
settings.

The following works perfectly as intended:

<style type="text/css">
.reset { font-size: 16px; }
#em { font-size: 1em; }
</style>
<div class="reset">
<p id="em">I am 16px by default, bound to by my parent (regardless of your
default font setting size) but will scale up with 'Text Zoom'</p>
<div>

View it with a default of 36px or whatever. The text won't change.
The 1em is based on the 16px parent, not on 'rem' units. If you have
multiple 'em' sizes in the 'reset' container (like the site I pointed you
to) and you change the 'reset' px value, all 'em' units inside will
rescale accordingly to that parent's base 'px' value.
 

>
>>  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?

You are nickpicking with unrealistic cases. I am not writing specs here.
Just pointing out a simple use case for min/max-font-size.

If your goal is to say "not true", based on absolutes of extreme cases.
I don't wish to engage in such detailed discussion unless it's to comment
on an actual spec when the time comes.

If you think no one should use pixels as such, I entirely disagree.

>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>?

It's irrelevant to this thread. And I use css resets and normalize(d) css.
Relying on default stylesheet is old school.

Received on Wednesday, 2 July 2014 09:54:11 UTC