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

On 7/5/15 05:22, Koji Ishii wrote:
> 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.

Not sure why this failed for you; could you file a bug with testcase?

Gecko does apply the writing-mode from HTML to the text within the SVG 
as well, as shown by an example like:

  data:text/html,<html style="writing-mode:vertical-rl">
   <body>Hello world
   <div>
    <svg width="100" height="100">
     <circle cx="50" cy="50" r="20" fill="green" />
     <text x="50" y="50" font-family="sans-serif" font-size="20px"
      fill="red">Hello!</text>
    </svg>

However, I agree it might be better to avoid this, as the svg image as a 
whole does not rotate. While there may be some cases where an author 
would want the text within an svg image to respond to the document's 
writing mode, this seems unlikely to be widely useful.

Perhaps we should simply add

   svg { writing-mode: initial; }

to the UA stylesheet? Then an author who *does* want the outside 
writing-mode to apply to text within the svg can still use 
"writing-mode: inherit" to achieve this.

JK

Received on Thursday, 7 May 2015 08:14:52 UTC