Fonts in SVG on the web

Post about projects that use Inkscape for web design.
Ged
Posts: 50
Joined: Wed Sep 16, 2015 3:01 pm

Fonts in SVG on the web

Postby Ged » Sun Jun 23, 2019 11:10 am

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, :roll: So, I tried a Google font (Oswald) using that instead, and wella, Firefox liked it. :o 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

Moini
Posts: 3249
Joined: Mon Oct 05, 2015 10:44 am

Re: Fonts in SVG on the web

Postby Moini » Mon Jun 24, 2019 12:35 am

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.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Ged
Posts: 50
Joined: Wed Sep 16, 2015 3:01 pm

Re: Fonts in SVG on the web

Postby Ged » Mon Jun 24, 2019 4:52 am

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?

Moini
Posts: 3249
Joined: Mon Oct 05, 2015 10:44 am

Re: Fonts in SVG on the web

Postby Moini » Mon Jun 24, 2019 8:32 am

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?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Ged
Posts: 50
Joined: Wed Sep 16, 2015 3:01 pm

Re: Fonts in SVG on the web

Postby Ged » Mon Jun 24, 2019 10:38 am

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.
Attachments
svg on edge.PNG
Edge does not recognize spaces and bunches the text on the left hand side
svg on edge.PNG (16.48 KiB) Viewed 1012 times
svg on firefox.PNG
Firefox recognizes the spacebar clicks and moves the text
svg on firefox.PNG (11.07 KiB) Viewed 1012 times

User avatar
Xav
Posts: 1184
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Fonts in SVG on the web

Postby Xav » Mon Jun 24, 2019 4:42 pm

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:

Code: Select all

This is the          This is the
first item           second item


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.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Ged
Posts: 50
Joined: Wed Sep 16, 2015 3:01 pm

Re: Fonts in SVG on the web

Postby Ged » Tue Jun 25, 2019 6:46 am

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. :oops:


Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 2 guests