How to Control Fonts in SVG Images of Charts and Tables?

MikeWV · 06-12-2014, 10:53 AM

I've been trying to no avail to get images of charts and tables to look presentable when scaled so as to accommodate different device display resolutions. Low resolution PNGs (96 ppi) with fixed pixel dimensions look real good on e-ink readers but they don't scale to accommodate higher resolution devices and they're way below the 300 ppi that the vendors want. As I make changes, the images get progressively worse. PNGs at 300 ppi with dimensions set as percent and auto look horrible when scaled well above or below their native size. So I decided to try SVG Images.

The few that I've converted look OK, so I think SVG images may be my best option. Large tables that have so many cells that the numbers are tiny on my Kobo Touch don't look as good as the fixed-pixel PNGs but at least they're legible. The other images look good and they scale well.

My only problem with the SVG images is that the sans serif fonts in my charts and tables get converted to serifed fonts. I started with Calibri in Excel then I tried Arial, but I keep getting what appears to be Times New Roman when the SVG image is displayed. The text displays well but Times New Roman just seems to look old fashioned in tables and charts.

I tried two means of creating SVG images: 1) File/Save As/PDF, open in Inkscape, adjust size to fit image, Save As/Plain SVG, 2) Create the PDF using the Foxit virtual printer then follow the same procedure as #1.

IE 11 is the only program I've tried that displays the text as sans serif. I thought with Arial, other software would at least default to a sans serif font, but that's not happening. And I didn't find any way to set a default font in Inkscape. If anyone can tell me how to control the font displayed in SVG images, I'd be very grateful.

Edit #1

There is a place in Inkscape to view the font that was apparently identified upon importing a PDF. My font is being identified as "sans normal." Although Arial and Calibri are available options, Inkscape is seeing the font or classifying the font as generic sans serif, which would be fine with me if the images were displaying the text as a generic sans serif.

Edit #2

Scratch Edit #1. The Text Tool has no effect on text originally contained in the PDF. It appears that it is intended for use with text that is added to the file after creation.

roger64 · 06-12-2014, 01:22 PM

Hi

You may have a look here. Hope it helps.

MikeWV · 06-12-2014, 02:19 PM

Thanks, Roger. That's useful information to have.

It looks like I could, as a last resort, recreate my tables in Inkscape. And I might even be able to add the text to charts in Inkscape rather than Excel. But I have 21 charts and 34 tables, some of which contain a lot of data, which is why I didn't use HTML tables. I'd be looking at a LOT of work to do it all in Inkscape so I'm hoping I can figure this out.

There's something I haven't found yet. A couple of hours ago, one small SVG table displayed as sans serif but I haven't been able to figure out what is different about that file or the PDF and spreadsheet it came from. I suppose it could be something random that I can't reproduce, but that doesn't seem likely. The chart that was created on the same tab in the same spreadsheet from the data in that table displays its text as serifed.

mrmikel · 06-12-2014, 04:36 PM

EPUB is probably the worst format for displaying tables. A press of the size key and it fails. Have you considered displaying the data in any other fashion or do you have a choice?

Some older devices won't even display tables.

MikeWV · 06-12-2014, 05:54 PM

MrMikel,

I probably should have gone with two print books. I've literally spent more time working on the images than I spent writing the books, compiling the data for the spreadsheets, and creating the tables and charts from the data.

I think a bigger problem than ePub not displaying tables well is the fact that there are virtually no fully compliant devices or software. After quite a few tries, I actually got my tables looking real good in 600x800 e-ink. But as I noted in my original post, when I make the images scalable, the image quality becomes unacceptable.

Tomorrow I'm redoing the images for the umpteenth and final time. This time they'll be SVG and if I get Times New Roman instead of a sans serif font, so be it. It's time to wrap this up and move on.

mrmikel · 06-12-2014, 08:00 PM

Times New Roman is fine for personal use. But if you should expand your horizons to publishing it, you will need to choose something else if you specify a font at all. TNR is not a free font, but one of those that might require a contract with a font foundry which would likely wipe out any profits.

If you open this opus in calibre editor, you might be able to see what is acting on your table stuff with a recent feature, view, live css. The editor can be opened separately and without changing the epub the way a conversion would do.

Tex2002ans · 06-12-2014, 08:47 PM

Quote:

Originally Posted by MikeWV

[...] and they're way below the 300 ppi that the vendors want.

May I ask where you got this information?

Quote:

Originally Posted by MikeWV

The few that I've converted look OK, so I think SVG images may be my best option. Large tables that have so many cells that the numbers are tiny on my Kobo Touch don't look as good as the fixed-pixel PNGs but at least they're legible. The other images look good and they scale well.

Sadly, large tables are just a giant problem. You have multiple issues:

The user can select a font size too large.
- This makes the information flow off of edge the page.
The table itself is too wide for a device
- The (not set in stone) "rule" that most people recommend is not to go beyond 4 columns wide.
Save the table as an image.
- For extremely large tables, this is what many people settle on because it is compatible across devices.
- Has a bunch of disadvantages (which I personally believe outweigh the benefits):
  - Not following user preferences of font, font size, etc. etc.
  - The look of the table can't be manipulated by CSS.
  - Not copy/pastable/searchable.
  - Not readable by a computer. (For example, a blind user would not be able to read the table, or text-to-speech couldn't read it either).
  - The text is at a fixed size. (For example, if you have poor eyesight and read at a large font, the table is impossible/hard to read).
  - If you make a mistake somewhere in the table and have to fix it, you have to go through the trouble to regenerate an entire image again, instead of just tweaking a simple fix in HTML.
  - Image of text don't scale the greatest (as you have stumbled on).

There was a bunch of discussion on tables here too:

https://www.mobileread.com/forums/sho...d.php?t=223062

And also, just keep in mind that at a certain point, a very wide table of data is just physically impossible to fit on a little cell phone. All of this is weighing out pros/cons.

Quote:

Originally Posted by MikeWV

I tried two means of creating SVG images: 1) File/Save As/PDF, open in Inkscape, adjust size to fit image, Save As/Plain SVG, 2) Create the PDF using the Foxit virtual printer then follow the same procedure as #1.

Did you take apart the SVG itself and see what the code is saying? Mind attaching a sample so some of us on the board can fiddle around with it?

Quote:

Originally Posted by MikeWV

It looks like I could, as a last resort, recreate my tables in Inkscape. And I might even be able to add the text to charts in Inkscape rather than Excel. But I have 21 charts and 34 tables, some of which contain a lot of data, which is why I didn't use HTML tables. I'd be looking at a LOT of work to do it all in Inkscape so I'm hoping I can figure this out.

[...]

I probably should have gone with two print books. I've literally spent more time working on the images than I spent writing the books, compiling the data for the spreadsheets, and creating the tables and charts from the data.

Also, what is your market for this book?
Are you going to be selling on Kindle?
Are you going to be selling on Nook?
Are you focused on iBooks only?
Are you selling this on your own site?

Also, you should keep in mind that SVG does not work in the old Kindle format... so if you are planning on selling on Kindle, you are limiting your market to EPUB if you go with SVG tables only.

I would say, your best bet is to either see if you can figure out a way to squeeze your tables into ~4 column-wide HTML tables. If not, go with the devil and settle on an image of a table (this is sadly, the most compatible way across devices, even though it looks like crap in many cases).

If you are selling this book on your site, feel free to do whatever, I personally settle on full HTML tables... you can go the SVG route if you want (although this one is not as nicely copy/pastable OUT of an EPUB, while pure HTML can be really transferred anywhere).

mrmikel · 06-13-2014, 07:58 AM

You can gain a little traction for wide tables by asking the reader to rotate his device. That will make it slightly wider and it even works on older devices and happens automatically on tablets.

This solution means the reader has to spin the device around which is not no smooth and not quite so easy for the older e-ink readers...I had forgotten that my little PRS-300 could even do it.

Maybe the best solution for you is to show it to someone else who is not so close to the project and maybe not even interested in the content and see what they think.

You know what they say: When the only thing you have is a hammer, everything looks like a nail. Just because you have an e-reader, doesn't mean you should be trying to display the data this way, unless you are going to step up to a 10" or greater screen reader. If you have a laptop, maybe the best way to display this particular monster is as a PDF. It would fix the display issues and not get warped by display change size issues so much.

MikeWV · 06-13-2014, 02:05 PM

Amazon's current specs state that they require 300 ppi or better. And I'm pretty sure that I read in multiple places that B&N and Apple want a similar quality, but those instances are hearsay, I haven't looked at any specs other than Amazon's since I created my first set of images last fall. Unfortunately, Amazon's image specs are ambiguous and contradictory, so it's hard to tell what they really want and what they'll accept. I figure if my images satisfy Amazon, then they should be suitable for the others.

MikeWV · 06-13-2014, 02:20 PM

No, I have not picked apart the SVG image files, as I haven't figured out how to do that yet.

I've attached my largest table and a chart in SVG format as requested. I've also attached a smaller SVG table and a PNG version of the large table that is low resolution and sized for a basic e-reader. When the PNG image is presented at dimensions that match the image dimensions, it looks good and is actually legible on my Kobo Touch. The files are in a zipped folder, as SVG is not a valid type for uploading.

DaleDe · 06-13-2014, 02:48 PM

SVG has a text option that can include the font you want. See SVG in our wiki to see an example. Using pure text means it is searchable and can be resized with full resolution.

Dale

MikeWV · 06-13-2014, 03:22 PM

I figured out part of the answer to my original question. The font used in the SVG images is the default font of the device on which it is displayed. For example, if I change the default font in Firefox to Calibri, the font in my SVG images is Calibri when I simply open an SVG file or an XHTML file containing an SVG image in Firefox. I also see Calibri in EPUBReader for Firefox. The default font in ADE is apparently Times New Roman and that cannot be changed.

The part of my question that I haven't figured out is how to specify a non-proprietary or generic sans serif font within the SVG files, within the image tag or in the CSS that will override the font that is set in the software presenting the images to a reader. I really need a sans serif font for the larger tables, as tiny serifed fonts are not clear.

I determined early on that because most of my tables are too big to be handled effectively and consistently by e-reading software, I would have to use images of the tables. And although my tables range from small to large, I decided to use images for all tables in the interest of continuity. But that's fine with me, as working with all but the smallest of HTML tables is a royal pain. Plus I already have perfectly good tables in Excel, so why why torture myself by reproducing them in HTML? I agree with Tex2002ans, many of the "disadvantages" of HTML tables look like desirable qualities to me. My tables would be incomprehensible if they wrapped, so not having that ability is a definite plus.

My market is individual investors and I plan to make the books available on Amazon, B&N, Kobo and Apple. The most recent version of the Amazon Kindle Publishing Guide states that SVG is a valid image file type. I took this to mean that KindleGen can now make SVG images work in Mobi for the older Kindles. Acoording to this wiki https://wiki.mobileread.com/wiki/KF8 "KF8 replaces MOBI but actually includes both a MOBI database and a KF8 database in the same file for backwards compatibility using older Amazon Kindle readers." But it doesn't say what KindleGen does with SVG images. If KindleGen converts SVGs to JPGs for older Kindles, it won't work. If it doesn't work, I may have to provide the books in two versions.

As far as the size of reading devices is concerned, my books are not novels, they are technical in nature and have formulas, tables and charts, which makes them ill-suited to reading on pocket-sized devices like phones. I managed to make the images look good at low resolution (96 ppi) on a 600x800 e-reader with fixed image dimensions and fixed font size, but that's the smallest that will work. I'm hoping that most of the people who buy the books will plan to read them on a tablet and that anyone who buys them will realize that they're not going to be able to read them on phone. According to recent poles, the trend in e-reading is toward tablets and hybrids like the Fire HD. Phones are OK for reading novels, I suppose, but not much of anything else other than email, texts and an occasional weather report.

DaleDe · 06-13-2014, 03:59 PM

You should be able to simply set the style="font-family: sans-serif;'' to get a generic sans-serif font. I do not believe any Amazon format supports SVG, so you will need a different solution.

Dale

MikeWV · 06-13-2014, 05:28 PM

I've tried specifying the font family in about six different places, some in the HTML file and a couple in the CSS file, but none have had any effect.

Per the Amazon Kindle Publishing Guidelines, 1/1/14:
3.6.1 Image Guideline #1:
* Use Supported Input Formats The Kindle platform supports GIF, BMP, JPEG, non-transparent PNG, and Scalable Vector Graphics (SVG) images.
* When using images for schemas, charts, tables, maps, or anything that includes text, pay special attention to the legibility of the final image.
* Add images to the source using the standard HTML <img> tag.
* Use a resolution of 300 dpi or 300 ppi for all images.

mrmikel · 06-13-2014, 10:23 PM

If you have any way of surveying your potential customers as to device type, it might be a good idea to make sure you aren't leaving many of them out. It would you an idea how much hair pulling or teeth gnashing is required as far as any devices table weirdness is concerned.

06-12-2014, 05:54 PM	#5
MikeWV Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2013 Device: Kobo Touch	First and Second Options MrMikel, I probably should have gone with two print books. I've literally spent more time working on the images than I spent writing the books, compiling the data for the spreadsheets, and creating the tables and charts from the data. I think a bigger problem than ePub not displaying tables well is the fact that there are virtually no fully compliant devices or software. After quite a few tries, I actually got my tables looking real good in 600x800 e-ink. But as I noted in my original post, when I make the images scalable, the image quality becomes unacceptable. Tomorrow I'm redoing the images for the umpteenth and final time. This time they'll be SVG and if I get Times New Roman instead of a sans serif font, so be it. It's time to wrap this up and move on.

06-13-2014, 03:22 PM	#12
MikeWV Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2013 Device: Kobo Touch	SVG Images and Table Talk I figured out part of the answer to my original question. The font used in the SVG images is the default font of the device on which it is displayed. For example, if I change the default font in Firefox to Calibri, the font in my SVG images is Calibri when I simply open an SVG file or an XHTML file containing an SVG image in Firefox. I also see Calibri in EPUBReader for Firefox. The default font in ADE is apparently Times New Roman and that cannot be changed. The part of my question that I haven't figured out is how to specify a non-proprietary or generic sans serif font within the SVG files, within the image tag or in the CSS that will override the font that is set in the software presenting the images to a reader. I really need a sans serif font for the larger tables, as tiny serifed fonts are not clear. I determined early on that because most of my tables are too big to be handled effectively and consistently by e-reading software, I would have to use images of the tables. And although my tables range from small to large, I decided to use images for all tables in the interest of continuity. But that's fine with me, as working with all but the smallest of HTML tables is a royal pain. Plus I already have perfectly good tables in Excel, so why why torture myself by reproducing them in HTML? I agree with Tex2002ans, many of the "disadvantages" of HTML tables look like desirable qualities to me. My tables would be incomprehensible if they wrapped, so not having that ability is a definite plus. My market is individual investors and I plan to make the books available on Amazon, B&N, Kobo and Apple. The most recent version of the Amazon Kindle Publishing Guide states that SVG is a valid image file type. I took this to mean that KindleGen can now make SVG images work in Mobi for the older Kindles. Acoording to this wiki https://wiki.mobileread.com/wiki/KF8 "KF8 replaces MOBI but actually includes both a MOBI database and a KF8 database in the same file for backwards compatibility using older Amazon Kindle readers." But it doesn't say what KindleGen does with SVG images. If KindleGen converts SVGs to JPGs for older Kindles, it won't work. If it doesn't work, I may have to provide the books in two versions. As far as the size of reading devices is concerned, my books are not novels, they are technical in nature and have formulas, tables and charts, which makes them ill-suited to reading on pocket-sized devices like phones. I managed to make the images look good at low resolution (96 ppi) on a 600x800 e-reader with fixed image dimensions and fixed font size, but that's the smallest that will work. I'm hoping that most of the people who buy the books will plan to read them on a tablet and that anyone who buys them will realize that they're not going to be able to read them on phone. According to recent poles, the trend in e-reading is toward tablets and hybrids like the Fire HD. Phones are OK for reading novels, I suppose, but not much of anything else other than email, texts and an occasional weather report.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
A problem with images inside tables	RbnJrg	ePub	2	10-28-2013 09:09 PM
can I use SVG images in mobi?	sarah_pnix	Kindle Formats	4	01-07-2013 04:21 PM
Q: Tables, images, and word-wrap	AndrewH	Workshop	2	12-22-2010 02:34 AM
PDF conversion which respects images/tables?	fivebells	Amazon Kindle	9	12-19-2010 11:18 AM
tables or svg?	bobcdy	ePub	18	12-06-2010 02:24 PM

06-12-2014, 10:53 AM	#1
MikeWV Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2013 Device: Kobo Touch	How to Control Fonts in SVG Images of Charts and Tables? I've been trying to no avail to get images of charts and tables to look presentable when scaled so as to accommodate different device display resolutions. Low resolution PNGs (96 ppi) with fixed pixel dimensions look real good on e-ink readers but they don't scale to accommodate higher resolution devices and they're way below the 300 ppi that the vendors want. As I make changes, the images get progressively worse. PNGs at 300 ppi with dimensions set as percent and auto look horrible when scaled well above or below their native size. So I decided to try SVG Images. The few that I've converted look OK, so I think SVG images may be my best option. Large tables that have so many cells that the numbers are tiny on my Kobo Touch don't look as good as the fixed-pixel PNGs but at least they're legible. The other images look good and they scale well. My only problem with the SVG images is that the sans serif fonts in my charts and tables get converted to serifed fonts. I started with Calibri in Excel then I tried Arial, but I keep getting what appears to be Times New Roman when the SVG image is displayed. The text displays well but Times New Roman just seems to look old fashioned in tables and charts. I tried two means of creating SVG images: 1) File/Save As/PDF, open in Inkscape, adjust size to fit image, Save As/Plain SVG, 2) Create the PDF using the Foxit virtual printer then follow the same procedure as #1. IE 11 is the only program I've tried that displays the text as sans serif. I thought with Arial, other software would at least default to a sans serif font, but that's not happening. And I didn't find any way to set a default font in Inkscape. If anyone can tell me how to control the font displayed in SVG images, I'd be very grateful. Edit #1 There is a place in Inkscape to view the font that was apparently identified upon importing a PDF. My font is being identified as "sans normal." Although Arial and Calibri are available options, Inkscape is seeing the font or classifying the font as generic sans serif, which would be fine with me if the images were displaying the text as a generic sans serif. Edit #2 Scratch Edit #1. The Text Tool has no effect on text originally contained in the PDF. It appears that it is intended for use with text that is added to the file after creation. Last edited by MikeWV; 06-12-2014 at 01:20 PM. Reason: Additional Information

06-12-2014, 01:22 PM	#2
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Hi You may have a look here. Hope it helps.

06-12-2014, 02:19 PM	#3
MikeWV Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2013 Device: Kobo Touch	Thanks, Roger. That's useful information to have. It looks like I could, as a last resort, recreate my tables in Inkscape. And I might even be able to add the text to charts in Inkscape rather than Excel. But I have 21 charts and 34 tables, some of which contain a lot of data, which is why I didn't use HTML tables. I'd be looking at a LOT of work to do it all in Inkscape so I'm hoping I can figure this out. There's something I haven't found yet. A couple of hours ago, one small SVG table displayed as sans serif but I haven't been able to figure out what is different about that file or the PDF and spreadsheet it came from. I suppose it could be something random that I can't reproduce, but that doesn't seem likely. The chart that was created on the same tab in the same spreadsheet from the data in that table displays its text as serifed.

06-12-2014, 04:36 PM	#4
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	EPUB is probably the worst format for displaying tables. A press of the size key and it fails. Have you considered displaying the data in any other fashion or do you have a choice? Some older devices won't even display tables.

06-12-2014, 08:00 PM	#6
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	Times New Roman is fine for personal use. But if you should expand your horizons to publishing it, you will need to choose something else if you specify a font at all. TNR is not a free font, but one of those that might require a contract with a font foundry which would likely wipe out any profits. If you open this opus in calibre editor, you might be able to see what is acting on your table stuff with a recent feature, view, live css. The editor can be opened separately and without changing the epub the way a conversion would do.

06-13-2014, 07:58 AM	#8
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	You can gain a little traction for wide tables by asking the reader to rotate his device. That will make it slightly wider and it even works on older devices and happens automatically on tablets. This solution means the reader has to spin the device around which is not no smooth and not quite so easy for the older e-ink readers...I had forgotten that my little PRS-300 could even do it. Maybe the best solution for you is to show it to someone else who is not so close to the project and maybe not even interested in the content and see what they think. You know what they say: When the only thing you have is a hammer, everything looks like a nail. Just because you have an e-reader, doesn't mean you should be trying to display the data this way, unless you are going to step up to a 10" or greater screen reader. If you have a laptop, maybe the best way to display this particular monster is as a PDF. It would fix the display issues and not get warped by display change size issues so much.

06-13-2014, 02:05 PM	#9
MikeWV Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2013 Device: Kobo Touch	Amazon's current specs state that they require 300 ppi or better. And I'm pretty sure that I read in multiple places that B&N and Apple want a similar quality, but those instances are hearsay, I haven't looked at any specs other than Amazon's since I created my first set of images last fall. Unfortunately, Amazon's image specs are ambiguous and contradictory, so it's hard to tell what they really want and what they'll accept. I figure if my images satisfy Amazon, then they should be suitable for the others.

06-13-2014, 02:48 PM	#11
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	SVG has a text option that can include the font you want. See SVG in our wiki to see an example. Using pure text means it is searchable and can be resized with full resolution. Dale

06-13-2014, 03:59 PM	#13
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	You should be able to simply set the style="font-family: sans-serif;'' to get a generic sans-serif font. I do not believe any Amazon format supports SVG, so you will need a different solution. Dale

06-13-2014, 05:28 PM	#14
MikeWV Connoisseur Posts: 54 Karma: 10 Join Date: Nov 2013 Device: Kobo Touch	I've tried specifying the font family in about six different places, some in the HTML file and a couple in the CSS file, but none have had any effect. Per the Amazon Kindle Publishing Guidelines, 1/1/14: 3.6.1 Image Guideline #1: * Use Supported Input Formats The Kindle platform supports GIF, BMP, JPEG, non-transparent PNG, and Scalable Vector Graphics (SVG) images. * When using images for schemas, charts, tables, maps, or anything that includes text, pay special attention to the legibility of the final image. * Add images to the source using the standard HTML <img> tag. * Use a resolution of 300 dpi or 300 ppi for all images.

06-13-2014, 10:23 PM	#15
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	If you have any way of surveying your potential customers as to device type, it might be a good idea to make sure you aren't leaving many of them out. It would you an idea how much hair pulling or teeth gnashing is required as far as any devices table weirdness is concerned.