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

On 29/06/2014 3:21 PM, Bruno Racineux wrote:

[snip]

>> I believe the problem is not with 'Zoom Text Only' but rather layouts
>> that have a height set in pixels. If you view my CSS Class site (see
>> below), 'Zoom Text Only' does not break the site unless you hit 'Zoom
>> Text Only' five times or have a minimum font size of 26px.
>
> Your design is pretty fluid and leave a lot of empty room, with no
> responsive design constraint, so there isn't' much harm in your case.

I find this for responsive design [1] and the following words:

   | The fluid grid concept calls for page element |
   | sizing to be in relative units like percentages,
   | rather than absolute units like pixels or points.

My CSS makes great use of relative units.

> My point of reference is a tightly integrated header layout like
> drbrucelevine.com, where the 'branding' header text section is carefully
> fit and already fairly big enough to read. And where a minor 'Zoom
> Text Only' breaks the page flow in an undesired manner.

Could only find it here.

http://web.archive.org/web/20140519094950/http://www.drbrucelevine.com/

> I locked that container's size deliberately regardless of the user's
> default font size setting, with '16px' set at the (header) container level.

The default size setting is *not* important and most often, it rarely 
comes into play (I note that your style sheet only uses *em* so please 
see below about such use). 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.

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

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

Now about your use of em. Can you please load this test case into either 
Firefox or Chrome. It uses the same style as your h2 header that you are 
concerned about.

<style type="text/css">
body * { background: lime; }
h2 {font-size: 0.8em}
</style>
<h2>Why is the text in this h2 header smaller than the text in the 
paragraph below?</h2>
<p>A paragraph</p>

When you know the answer, you may understand why there is such a thing 
as a default font size. Here is a hint. Your usage of em is relative to it.


1. http://en.wikipedia.org/wiki/Responsive_web_design


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

Received on Tuesday, 1 July 2014 12:24:25 UTC