Re: [CSS3-Values] Get Width of Styled Text

Hi Christoph,

I think it's really, really hard to make something like this work properly, since the width of text is affected by both a large set of style properties *and* the actual content of the text itself.

The HTML5 canvas element includes a measureText method, that seems better suited to the applications you're considering.

John

----- Original Message -----
From: "Christoph Päper" <christoph.paeper@crissov.de>
To: "W3C Emailing list for WWW Style" <www-style@w3.org>
Sent: Wednesday, March 31, 2010 7:06:54 AM
Subject: [CSS3-Values] Get Width of Styled Text

Some basic Latex package provides the command \widthof{} which returns the width of its argument using the local font properties etc. Could we get something similar into CSS?

There are several ways to specify this:

 1   Extend <length>
 2   Add it to every appropriate property separately

 A   width: "String";
 B   width: calc("String");
 C   width: widthof("String");
 C*  width: widthof(String);
 D   width: calc(widthof("String"));
 D*  width: calc(widthof(String));

This should not allow markup in the string, just some text that is anonymously, invisibly rendered with current ‘font-*’ and ‘text-*’ properties applied.

Options C and D would also make this possible:

 C+  width: widthof(url("foo.img"));
 D+  width: calc(widthof(url("foo.img")));

For these ‘heightof()’ might also be useful. The other variants could work, too, but don’t look as intuitive to me:

 A+  width: url("foo.img");
 B+  width: calc(url("foo.img"));

Overall I prefer 1 and A, but probably someone will convince me that A would fail with some shorthand properties. D and D+ are just special cases of C and C+ respectively where ‘calc()’ has only one argument.

Please note that authors already can use the height of text in the current styling as a unit of length, ‘em’. (There is no access to the lineheight or leading, although it would be more useful sometimes.) The Level 3 unit ‘ch’ shares some usecases with ‘widthof()’, but usually will only give approximate results. Maybe it’s good enough, though.

I am unexperienced with vertical text so did not consider it, except insofar that ‘lengthof()’ might be a more general and therefore preferable name if the <string> version doesn’t fly.

Received on Wednesday, 31 March 2010 01:12:57 UTC