W3C home > Mailing lists > Public > public-css-testsuite@w3.org > February 2011

Re: [CSS3]writing-mode-vertical-rl.xht

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Wed, 9 Feb 2011 06:54:35 -0800
Message-ID: <dfdc8f0cf2483026a898acdaae9bf7e6.squirrel@cp3.shieldhost.com>
To: "Taka Oshiyama" <oshiyama@est.co.jp>
Cc: "Public CSS test suite mailing list" <public-css-testsuite@w3.org>, "Etemad Elika" <fantasai@inkedblade.net>

> http://test.csswg.org/source/contributors/east-tokyo/submitted/css3-writing-modes/writing-mode-vertical-rl.htm

Taka,

Here are some comments.

1-

    <link rel="help"
href="http://www.w3.org/TR/css3-writing-modes/#writing-mode1" />

You can add a title so that the link text indicates the destination.
Example given:

    <link rel="help" title="CSS3 Writing modes: 3.1. Block Flow
Direction: the 'writing-mode' property"
href="http://www.w3.org/TR/css3-writing-modes/#writing-mode1" />

Such text will appear in <link>-capable browsers like Firefox with link
widgets 1.6.6 (add-on), Konqueror rellinks add-on, etc..


2-
    <meta content="This tests the block flow direction. The writing mode
is vertical, and the block flow is right to left. "/>

Suggestion (white space at end of line):

    <meta content="This tests the block flow direction. The writing mode
is vertical, and the block flow is right to left." />

3-
More compact CSS code

.test and .control share a number of identical declarations. line-height
is also redeclared.


Actual code (18 declarations)
-----------------------------

        .test
        {
            writing-mode: vertical-rl;
            font: 20px/1 Ahem;
            width: 6em;
            height: 6em;
            color: blue;
            background: yellow;
            line-height: 1;
        }
        .test p
        {
            text-indent: 0;
            white-space: pre;
            margin: 0;
        }

        .control
        {
            font: 20px/1 Ahem;
            white-space: pre;
            width: 6em;
            height: 6em;
            color: blue;
            background: yellow;
            line-height: 1;
        }

        div
        {
            margin: 10px;
        }


Proposed more compact CSS code (11 declarations)
------------------------------------------------

        div
        {
            background: yellow;
            color: blue;
            font: 20px/1 Ahem;
            height: 6em;
            margin: 10px;
            width: 6em;
        }

        .test
        {
            writing-mode: vertical-rl;
        }

        .control
        {
            white-space: pre;
        }

        .test p
        {
            margin: 0;
            text-indent: 0;
            white-space: pre;
        }

Listing properties in alphabetical order is preferred.
http://wiki.csswg.org/test/css2.1/review-checklist#nitpicky

4-
<p class="instructions">
.instructions is not defined anywhere. I think you can safely removed
class="instructions".

The first (topmost) sentence of a testcase should be, by default, the
instructions or expected-results statement.

"[ ] The test contains no extraneous content."
http://wiki.csswg.org/test/css2.1/review-checklist#test-design


5-
<p>xx xx
x xx x
x xxx
xx</p>
<p>x x xx
x xx</p>

For debugging, reviewing and understanding (web authors) purposes, I
believe it is better to use distinguishible letters (in the source
code). Doing this also overcomes web inspection (Firefox DOM inspector,
webkit Web inspector, IE dev. toolbar, Opera DragonFly, Konqueror
DOMtreeviewer) add-ons limitations.

Example given
http://test.csswg.org/suites/css2.1/20110111/html4/containing-block-031.htm
uses x, a, b, c and d (5 distinguishible letters in the source code)
instead of 5 "x".

When using Ahem font, the only letters making a difference is "p"
(descent only) and "É" (ascent only).
http://www.w3.org/Style/CSS/Test/Fonts/Ahem/

6-
Best semantic usage

class attribute is for logical grouping of several elements; id
attribute is for identifying an unique element in a document.

So, here, I would prefer to do:

    <div id="test">
    (...)
    </div>

    <div id="control">
    (...)
    </div>


regards, Gérard
-- 
Contributions to the CSS 2.1 test suite:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

CSS 2.1 test suite (RC5; January 11th 2011):
http://test.csswg.org/suites/css2.1/20110111/html4/toc.html

CSS 2.1 test suite contributors:
http://test.csswg.org/source/contributors/
Received on Wednesday, 9 February 2011 14:55:11 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 9 February 2011 14:55:18 GMT