w3c
Using CSS writing modes instead of images for the top-left part of our specs?
I asked @bert-github if we could use CSS to replace the image we're featuring at the top-left of our specs, and he said we could:
The feature we need is 'writing-mode: sideways-lr' and only works in Edge and Firefox. Blink-based and webkit-based browsers so far only support 'writing-mode: vertical-lr', in which English text turns clockwise (which is how it normally turns inside Japanese).
But 'sideways-lr' is essentially a rotation and for absolutely positioned elements it is usually indistinguishable from a rotation. It certainly is in our case. So we can use 'transform: rotate(-90deg)' as a fallback.
In fact, unless we want to show off 'writing-mode', we could just use rotation directly. It works in browsers as far back as Opera 12.
When consulted, @deniak agreed on principle but pointed out:
That being said, I see CSS transforms is only a WD although it seems widely supported [1] and CSS writing modes is a CR but the feature we need isn't available in all browsers.
If we decide 'transform' in our TR stylesheets is acceptable, then I can work with Bert on suggesting the change to spec-prod.
... and @plehegar concurred and added "I would also like to get a +1 from @fantasai on this change if possible."
With all the discourse out there and particularly in the recent w3c-ac-forum thread on the AB election on how we have a website that is old-fashioned, I am always looking at ways to make incremental enhancements here and there, and this particular change seems (to me) to qualify.
On Wednesday, May 24, 2017 2:31:42 AM CEST Coralie Mercier wrote:
With all the discourse out there and particularly in the recent w3c-ac-forum thread on the AB election on how we have a website that is old-fashioned, I am always looking at ways to make incremental enhancements here and there, and this particular change seems (to me) to qualify.
I don't think it is old-fashioned. It is a design that is copied by everybody on the Web who wants his writing to resemble a specification.
Moreover, what is the advantage of replacing the background image? Sure, it is possible, e.g., this is pretty close (at least if your browser's default font size is 16px; mine isn't :-) ):
@supports (transform: rotate(-90deg)) {
body {background-image: none}
body::before {position: fixed; top: 0; left: 0;
content: "W3C Recommendation"; text-align: right;
background: #005a9c; color: #fff; padding: 0 2em; width: 15.5em;
font: 1.225em/1.3 Gill Sans, sans-serif;
transform: translate(-50%,-50%) rotate(-90deg)
translate(-50%,50%)}}
but other than showing off some new CSS, what's the use? It adds a number of lines and doesn't make the specs any more beautiful or more usable.
If you want to be sure the right font (Gill Sans) is used, you should also count five lines more for an @font-face rule and some 43KB for a WOFF file. (You can use the existing WOFF file of /Style/CSS, which browsers may already have in their cache. An alternative is to make a smaller WOFF file with just the 30 or so letters needed.) Compare that to the 1KB(!) for the current background image...
Bert
Bert Bos ( W 3 C ) http://www.w3.org/ http://www.w3.org/people/bos W3C/ERCIM [email protected] 2004 Rt des Lucioles / BP 93 +33 (0)4 92 38 76 92 06902 Sophia Antipolis Cedex, France
Moreover, what is the advantage of replacing the background image?
@bert-github: isn't text, in general, preferable over images, when the latter show just text with no other designs, plain-colour on plain-colour? For i18n and a11y purposes, if nothing else… eg, that vertical banner would be easier to translate into other languages as text. About the size, perhaps we can skip the custom font, and opt for a system font (or a font that is already used on the document)?
(Definitely it's a small change, and I have no strong opinion either way — I'm just curious about the general philosophy :)
@bert-github regarding your question:
Moreover, what is the advantage of replacing the background image?
Other than eating our dog food, Denis and I and a few others had to generate such an image for obsolete and rescinded Recs, and it was tedious.
@bert-github I'd use min-width instead of width there, and of course the 'content' rule would be split out across the various status-specific CSS files whereas the rest of it would stay in the main file, but otherwise looks pretty reasonable. See also https://github.com/w3c/tr-design/issues/98 (which this is technically a duplicate of).
@tripu The information is already contained within the text, so it's not actually needed for a11y: we're duplicating it visually here for sighted users.
Anyway, if @bert-github wants to draw up a changeset, I'm happy to accept. :)
