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

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
needed.

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
unprefix.

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.

Thoughts?

[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

/koji

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