- From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
- Date: Thu, 15 Sep 2016 21:18:34 +0000
- To: public-svg-issues@w3.org
AmeliaBR has just labeled an issue for https://github.com/w3c/svgwg as "Text chapter": == 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. See https://github.com/w3c/svgwg/issues/273
Received on Thursday, 15 September 2016 21:18:41 UTC