[svgwg] Inline-blocks in text

karip has just created a new issue for https://github.com/w3c/svgwg:

== Inline-blocks in text ==
It is possible to generate inline-blocks in text elements by having 
horizontal text within vertical text (and vertical text within 
horizontal text). It would be nice if the [SVG2 text 
chapter](https://svgwg.org/svg2-draft/text.html) would mention this 
special case. Here's details:

The [CSS3 Writing Modes 
3](http://www.w3.org/TR/css-writing-modes-3/#block-flow) specification
 defines that 
“If a box has a different _writing-mode_ value than its containing 
block: 
... If the box has a specified _display_ of _inline_, its _display_ 
computes to **_inline-block_**.  [CSS21]”

However, the [SVG text 
chapter](https://svgwg.org/svg2-draft/text.html#TextProperties) says 
that everything should be _inline_: “_Display_ property values other 
than _none_ and _inline_. Like all other SVG elements, any value of 
display on an SVG text element other than _none_ is handled just as if
 it were **_inline_**. Thus it is not possible for a single ‘text’ 
element to have any block children.”

The [SVG1.1 
spec](http://www.w3.org/TR/SVG/text.html#SettingInlineProgressionDirection)
 had a paragraph saying that writing-mode only applies to `<text>`, 
not to `<tspan>` and therefore it didn't have this issue. That 
restriction has been [removed from the SVG2 
spec](https://github.com/w3c/svgwg/commit/e8e936d0ab0f2cfee3d7b301b3bf2375253d332e),
 making it possible to create inline-blocks by changing the 
writing-mode.

Here’s an example (works in Firefox): https://jsfiddle.net/g70abc1c/

```
<text style=“writing-mode: vertical-rl; display: inline”>
Hello
  <tspan style=“writing-mode: horizontal-tb; display: inline; height: 
100px;”>Goodbye</tspan>
World
</text>
```

If you inspect `<tspan>` in Firefox, you’ll see that it has _computed 
style_ set to _inline-block_ and it is rendered as inline-block. 
However, width and height properties don’t have any effect on it (as 
they would in html), which indicates that it isn't a normal 
inline-block(?)

It would be nice if the SVG2 spec would say something about this 
special case.


Please view or discuss this issue at 
https://github.com/w3c/svgwg/issues/273 using your GitHub account

Received on Thursday, 15 September 2016 09:03:26 UTC