[css3-values] units for 'rendering surface'

Hello,

I'd like to be able to set a suitable width limit on a column of text in
an iPhone, without designing specifically for an iPhone.  I don't
believe there's any standard way to express this in CSS.

Effectively, I need the greatest width of a box containing 'medium'
text, such that it would display that text at a comfortable size when
scaled to show complete lines - any wider, and the scaling would either
make the text too small or make it impossible to show a whole line at once.

Assuming that an iPhone is configured such that unscaled 'medium' text
is readable and doesn't produce too few characters per line, this ideal
width would be that of the 'rendering surface', i.e. the 'device-width'
that the iPhone offers as a "Media Queries" feature.  And even if that
assumption isn't correct (e.g. the scaled text would be slightly too
small), it's just a matter of scaling the ideal width by a corresponding
amount.

"Values and Units" defines some units (vw, vh, vm) in terms of the
'viewport' size.  What would this viewport be in the case of an iPhone,
or some similar 'static scaling' device?  The MQ feature 'width' is
defined in terms of a 'viewport', and the iPhone offers that as the
width of its virtual space (the 980px one), so I presume that it could
reasonably define 100vw as 980px, and this would not be related to the
'ideal width'.

If there were another set of units (e.g. rsw, rsh, rsm) defined in terms
of 'rendering surface', the iPhone could define 100rsw as its
device-width (320px, AIUI).

Now applying this to the problem of restricting the width of the column
of text, we could write:

<div style="max-width: 100rsw">
  Column text
</div>

An iPhone could then interpret 100rsw as 320px, and the column could be
zoomed in on comfortably.  In other environments (e.g. desktops),
browsers would probably interpret 100rsw as something much bigger
(screen size), so some other constraint (e.g. window size) would apply
and the max-width here would have no effect.

Combined with other CSS3 features, you could take account of the font
size used on the text:

<div style="max-width: calc(100rsw * 1em / 1rem)">
  Column text
</div>

You could also combine it with other restrictions to deal with other
problems, e.g. lines being too many characters wide:

<div style="max-width: 100rsw">
  <div style="max-width: 35em">
    Column text
  </div>
</div>

In a full-screen desktop browser, the main problem is 'lines too long',
and it's likely that 35em < 100rsw, so 35em applies and deals with it. 
In an iPhone, the main problem is the conflict between sufficient font
size and showing complete lines; 100rsw would apply and deal with that
problem.

Does this sound reasonable?  I'm not sure that 'rendering surface' is
the right term for what is being described by rs*, but it seems to be
close to what I mean.

Thanks,

Steven

Received on Monday, 8 December 2008 13:21:13 UTC