4 ms·
Here's a simple issue that I've never figured out: 1. Create an svg 2. Draw an svg rectangle in there 3. Draw an svg text "Hello World" so that it fits insid
by jancsika 6y ago
Here's a simple issue that I've never figured out:
1. Create an svg
2. Draw an svg rectangle in there
3. Draw an svg text "Hello World" so that it fits inside the rectangle.
4. Make sure #3 above works regardless of which platform/browser you are using.
Now, I don't see it as a catastrophic problem that I can't (easily) automate everything up to step #3. I mean, maybe I could by iterating over various sizes inside an offscreen HTML5 canvas and measuring the results or something. But it isn't the end of the world to, say, just guess and check in a browser until I hit the right pixel size.
Problem is, that rendered result tells me absolutely nothing about what will render on other platforms. Maybe OSX will eat less horizontal width. Hell, maybe some troglodyte who lives deep in the guts of Gnu font rendering stack makes a change that accordions out the horizontal width so it's way out of whack with Windows and OSX. There's no spec that says a troglodyte can't do that. (This all holds for fixed-width fonts the same as variable width, btw.)
It's weird because I see all these SVG frameworks that have demos with, say, a graph where text looks to be aligned so that the end of a label doesn't overlap with a vertical line. But there's never a caveat given-- if there were, it should be that SVG cannot guarantee there won't be an overlap there, because it cannot control the underlying font engine that way. You literally have to check with your eye on every platform that you want to support[1].
Edit: clarification
Edit:
[1] You can't even simply check for each different font stack-- you have to check every extant version of that stack. Because again, a font stack can make a lot of arbitrary changes from version to version.
- jfk13 6y agoAre you explicitly using a linked/embedded font resource, so that you control exactly what font is used to render the text? If not, there's certainly no expectation of uniformity.
- perardi 6y agoAgreed. I simply would not expect this to work properly if you don't specify a font. Just compare Times New Roman and Verdana, two fonts that are broadly available, and broadly different in terms of character widths. Verdana will probably bust out of that container. Maybe if we had container queries, and could set font size as a…container unit? I don't even know what to call it. Like vw and vh units, but relative to a parent container.
- SpaceNugget 6y agowould that not just be `%`?
- svachalek 6y agoThat should be easy! https://www.amazon.com/CSS-Awesome-Mug-Programmer-Developer/dp/B06Y13QC8N https://www.amazon.com/CSS-Awesome-Mug-Programmer-Developer/...
- perardi 6y agoWait, like this? https://codepen.io/cperardi/pen/VwPmMrM https://codepen.io/cperardi/pen/VwPmMrM I would have no expectation at all that would work without specifying a specific font. Fonts just have different horizontal metrics. That doesn't seem to be a bug, so much as “fonts are different, if you want very specific space-constrained rendering, you should explicitly specify a font, and ideally serve it so all platforms get the exact same font metrics”.
- perardi 6y ago(Or convert to outlines, and then embed some sort of metadata for accessibility and machine readability. But that’s probably overkill.)
- runarberg 6y agoAs a user I sometimes need to select a part of the text and copy to my clipboard
- jancsika 6y ago> you should explicitly specify a font, and ideally serve it so all platforms get the exact same font metrics Oh wow, do I have news for you. The hidden premise of my quest is that: 1. I'm shipping a fixed-width font and using it on every browser/platform combo. 2. I'm setting the same exact pixel font size that is being used on every browser/platform combo. (Well, I was until I found this discrepancy-- read below.) 3. The font metrics are different across all platforms! Now, normally this shouldn't matter. The rendered width differences across, say, OSX and Windows are so small that we're talking a fraction of a pixel for a small test string. But at some point in the past five years, somebody made a change in the Gnu font-rendering stack that made it an outlier in terms of rendered width. The same small test string would be greater than a pixel wider than the other systems. So for a medium to long string the width is different enough that in general you'd need to set a smaller pixel width for the recent Gnu systems if you want to get close to the same width as the other systems. There's no spec about these metrics, so there's absolutely nothing I can do about the discrepancy. Welcome to the Font Rendering Matrix! I maintain a diagram-based language that has text in boxes connected by lines. On OSX and Windows the box is tight-fitting around the text. But on recent Ubuntu the box has empty space at the right-- this is because I had to choose a smaller font-size for Linux to keep the wider text from overlapping the box. Once the renderer does all its font business with the smaller font (and I am not limited myself to integer numbers, btw), the width of the Gnu-rendered string is noticeably less wide than what would be rendered on OSX/Windows. However, I must keep the box at the same dimensions as it would display on OSX/Windows-- otherwise a user on Ubuntu could place two boxes side by side and cause an overlap when opened on OSX/Windows. So I'm forced to make things a bit ugly on Ubuntu to retain compatibility across platforms, and introduce Ubuntu users to The Font Matrix problem if they happen to complain. Edit: clarification
- ska 6y agoWhy would you expect this to work with the font changing? Am I missing something?
- earthboundkid 6y agoAny decent vector drawing tool should have a mode where you save the text as shapes instead of letters, so it renders consistently. I know Adobe Illustrator does.
- saagarjha 6y agoBut then you can’t select it?
- aardvark179 6y agoThis is one of the failings of SVG as a really good graphics format. The ideal solution would be to embed the font in your graphics file so that it will always be available to the renderer, but the font’s licence may not allow this. The second best thing to do is convert the text to curves, and embed a blank font which can hold the text. This trick is pretty common in PDF files, especially scanned documents with added OCR data.
- earthboundkid 6y agoNo. But the idea is that this is the version exported for end users, not an editable version. If you need the text to be accessible, you can add a description/title for screen readers.