"Text sample" should be displayed rotates 90 degrees clockwise.

I suggest:

"Text sample" should be rotated 90 degrees clockwise.

Both div have a 10px margin on 4 sides while the reftest only has a
margin-right of 10px.

line 11: color: blue;
Since there is no text, you can remove this.

Here too: the "e" glyphs look different and there is aliasing of the
text while the image has the edges of glyphs smoothed, anti-aliased.

I'd say the same comments as above for


I have given a lot of thought on how to work around the multiple
constraints involving choice of font and mechanism of rendering font:
- font license allowing font to be embedded and used; in a multiple
platform context (Windows, MacOS X, Linux), this is not easy to overcome
- small filesize of webfont (say, less than 100KByte; ideal would be
less than 50Kbytes)
- accuracy and expectability of rendering of webfont: it should be
accurate to the point of making an image for the reftest
- the local font version could differ from the version used for the
webfont and create some noticeable difference

The main purpose of all this is to create a reftest and one that is
accurate and reliable for automated comparison. Your tests can still be
good and reviewed+approved if a reftest can not be created for your

Times New Roman

I considered using "Times New Roman" font. It is very present under
Windows. MacOS X 10.5 apparently has "Times New Roman" installed too:
and so MacOS X 10.6:
and so MacOS X 10.7:
Linux does not have Times New Roman but uses another font claiming to be
metrically-equivalent: Liberation Serif
"[Liberation Serif font] is used in some GNU/Linux distributions as
default font replacement for Times New Roman."
and this SVG is really interesting:
The fonts look similar but several glyphs are different and this will
make reftests fail.

So, I think we can rule out Times New Roman font.

3 widely installed fonts

Another idea would be to use 3 fonts that we know would be installed
under each platform.

div#test {font-family: "Liberation Serif", Times, "Times New Roman";}

and then create 3 matching reference files. That would be pretty
reliable and accurate. On the other hand, no font to download. No
webfont to create. No font to ask the user to go here and install. But 3
reference images to create... in 3 reference files ... for each test ...
which is a lot of work.

Ahem font

It would still be not that easy and quite a bit of work. We have to
carefully select characters that will indicate the orientation of the
glyph (lr versus rl) when being sideways and not sideways. Only the
lowercase "p" and uppercase "É" can show a different rendering from an
1em square. For instance, in
the first letter (replacing the "T" in your test) would absolutely have
to be either an "p" or an "É".

Specific font to download and install

And there is always the possibility of asking the tester to go and
download a particular font and install it. I am for this. We ask the
testers to install Ahem font. Why not do the same for, say, DejaVu Serif

Contributions to the CSS 2.1 test suite:

CSS 2.1 Test suite RC6, March 23rd 2011:

CSS 2.1 test suite harness:

Contributing to to CSS 2.1 test suite:

Received on Saturday, 16 March 2013 06:07:47 UTC