W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2019

Re: [csswg-drafts] Images with layout information (#4116)

From: Mike Bremford via GitHub <sysbot+gh@w3.org>
Date: Mon, 15 Jul 2019 09:04:16 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-511325590-1563181455-sysbot+gh@w3.org>
As it happens we've been considering this problem for some time as well.

Our goal was to improve layout for SVG embedded within HTML - for example, to insert text following a path in SVG as an inline element within HTML, and have the baselines match up:

``` html
<!DOCTYPE html>
<html>
<head>
<style>
p, text { font-size: 30px }
svg { display: inline; width:80px; height: 40px }
path { display: none }
</style>
<body>
<p>
Text on a
<svg>
<path id="curve" d="M 10 40 C 30 20 40 20 70 40"></path>
<text id="curveText"><textPath href="#curve">curve</textPath></text>
</svg>
and back to normal
</p>
</body>
</html>
```

![image](https://user-images.githubusercontent.com/989243/61205273-832e0c00-a6e7-11e9-9b84-1ca9d13c40bb.png)

Our plan was for an additional property on the SVG element which is the id of its descendant with the external baseline. So, in the example above we could have something like `<svg baselineElement="curveText">`. This would work for MathML or other embedded XML syntaxes, and for elements with a shadow DOM. We hadn't considered bitmaps.

(The second part of the problem was an auto-size property for SVG, something like `<svg style="width:content-fit; height:content-fit>"`, to size the element to its visible boundaries. Not relevant for baselines though so I'll come back to that in another issue at some point).

-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4116#issuecomment-511325590 using your GitHub account
Received on Monday, 15 July 2019 09:04:18 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:50 UTC