W3C home > Mailing lists > Public > www-style@w3.org > May 2015

[css-writing-modes][svg] SVG and writing-mode

From: Koji Ishii <kojiishi@gmail.com>
Date: Thu, 7 May 2015 13:22:18 +0900
Message-ID: <CAN9ydbV=h9P6-h68ZkYusPYZP=jHVSw8=CQ6+bDdbw0N-3jpJQ@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>
Cc: davve@opera.com, duga@google.com
Not sure where to post cross-WG thing, IIUC cross-posting is not
recommended, so let me start here.

An issue was brought up asking whether SVG viewBox is logical or
physical when containing HTML has writing-mode: vertical-*. I think
this is easy -- physical -- and should be confirmed at www-svg if

But then checking CSS Writing Modes brought up a couple of CSS questions.

1. Is SVG "images" or "content involving text"?

CSS Writing Modes defines[1]:

* The content of replaced elements do not rotate due to the writing
mode: images, for example, remain upright.

but then defines:

* However replaced content involving text (such as MathML content or
form elements) should match the replaced element’s writing mode and
line orientation

I suppose SVG belongs to images rather than "involving text" here even
if SVG contains text.

2. Does writing-mode: vertical-rl in HTML inherits to SVG?

The other one is how CSS writing-mode applies to text in SVG; i.e., if
there were <text> in SVG, and the containing HTML is vertical-rl,
should the <text> be vertical or not?

Current implementation is a bit complicated. WebKit/Blink applies
-webkit-writing-mode to HTML, and writing-mode to SVG, so if author
specifies -webkit-writing-mode: vertical-rl, it does not affect SVG.
But this behavior may change when unprefixed, depends on how we

Trident supports writing-mode in 2003 CR syntax for HTML, which is the
same as the current SVG syntax. Applying writing-mode: tb applies both
to HTML and SVG text.

I couldn't test Gecko; when I applied vertical-rl to <body> and put
SVG in it, it does not render as of today's nightly.

# Proposal

While SVG might need some clarification in their spec if needed, I
think part of the problem come from the CSS definition where it
renders SVG upright (assuming my understanding above is correct) but
still writing-mode value is vertical and is inherited into SVG.

My proposal hence is CSS defines:
1. Clarify SVG should render upright
2. Upright-rendered replaced elements have default writing-mode to horizontal-tb

Stopping writing-mode inheritance at SVG boundary not only prevents
issues today, but also future issues when SVG changes its syntax, and
helps authors to not to surprise by all text in SVG images being
vertical when document's writing-mode was changed.


[1] http://dev.w3.org/csswg/css-writing-modes-3/#block-flow
[2] http://dev.w3.org/csswg/css-writing-modes-3/#svg-writing-mode

Received on Thursday, 7 May 2015 04:22:47 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:31 UTC