Hi, I thought I'd touch base here with a problem that others may be familiar with.

I draw diagrams that include quite a lot of text. However, SVG diagrams throw up a few unexpected problems on the web. Some browsers (eg. Firefox) changed my fonts. For example, a sans serif font is turned into 'Times New Roman'. So, Ive been doing 'object to path.' It works, but the file size expands exponentially.

So, I did some research and found that Firefox prefers web-safe fonts. Okaaaay, So, I tried a Google font (Oswald) using that instead, and wella, Firefox liked it. Moreover, the file-size was a fraction of the size of my previous 'object to path' strategy.

But, Explorer and Edge packed a hissy fit. They failed to render the Google font correctly. To be specific, the text lost spacing, and the words all bunched on the left hand side!

So, I might try another web-safe font and see if that works. Has anyone else had this issue?

Ged

The font must be installed on the computer that displays it.

You can convert the text to paths, if it needs to use a specific font. If you don't, then you cannot rely on your text looking the same everywhere.

But it is installed on the computer that Im looking at. That's my point. Firefox and chrome is displaying just fine, but explorer an edge is not. They don't seem to recognise more than one space-bar. Is it better practice to use different text boxes rather than tap a lengthy space between one bunch of text and the next?

Aha. So it's no longer the font that this is about? Can you take screenshots of what exactly you are asking help for now?

Ok, Ive put 2 screenshots in the attachments. Edge does not recognize spaces and bunches the text on the left hand side. However, they both seem to work when I create a separate text box and place it where I want it, so that might be the answer for now.

The other answer is to turn the text to a path but that option blows up the file size way too much for the internet.

In general you shouldn't lay out text by positioning it using the space bar, but especially not for use on the web. In the HTML world the browser is free to collapse spaces as it sees fit, so this kind of layout doesn't generally work. You can add a 'white-space: pre' CSS rule to force the spaces to be preserved, but it's still a risky strategy - all it needs is for one browser to render a space character slightly narrower or wider than another browser and your positioning is ruined again.

There's also an accessibility issue. Consider something like this:


You want it to be considered as two separate things - 'this is the first item' and 'this is the second item' - but the browser would treat it as two separate lines of the same text, resulting in 'this is the this is the first item second item'. For blind or partially sighted user relying on a screen reader, this would be extremely confusing and misleading. Even for a sighted user, trying to copy and paste one of the blocks would not be possible.


So the correct approach is to do what you've discovered by accident: lay out your text blocks as separate elements on the page. The browsers then get clear instructions about the placement of the blocks, and each block of text is a single encapsulated object that works better with screen readers, or with copying to the clipboard.

Thanks for the good answer. I started my diagram drawing for book projects, then carried my spacebar clicking habit to images for the web. Lesson learned.