Using svg graphics for title page - Page 2

zonker · 08-11-2014, 12:31 PM

I finally solved.

In your example, font-size attributes are inside style attribute:

Code:

<text style="text-anchor: middle; font-size: 20px; font-family: Futura" textLength="180" x="150" y="65">Some Author</text>

But in "3.6.10 Image Guideline #10: Displaying Text Correctly within SVG" of "Amazon Kindle Publishing Guidelines" I found that:

Quote:

To display text correctly within an SVG, use the font-size attribute for <text> inside the SVG.
Example

Code:

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="20" y="20" font-size=20 fill="red">svg text sample</text>
</svg>
</body>
</html>

So I guess the right working code for your example should be:

Code:

<text style="text-anchor: middle; font-family: Futura" textLength="180" font-size="20" x="150" y="65">Some Author</text>

NOTE: if I write font-size=20 like in the example instead of font-size="20" it doesn't work. Anyway font-size must be without "px".

Uploading to kdp characters appear finally with the right size in the online preview.

RbnJrg · 08-12-2014, 10:04 AM

Quote:

Originally Posted by zonker

I finally solved.

In your example, font-size attributes are inside style attribute:

Code:

<text style="text-anchor: middle; font-size: 20px; font-family: Futura" textLength="180" x="150" y="65">Some Author</text>

But in "3.6.10 Image Guideline #10: Displaying Text Correctly within SVG" of "Amazon Kindle Publishing Guidelines" I found that:

So I guess the right working code for your example should be:

Code:

<text style="text-anchor: middle; font-family: Futura" textLength="180" font-size="20" x="150" y="65">Some Author</text>

NOTE: if I write font-size=20 like in the example instead of font-size="20" it doesn't work. Anyway font-size must be without "px".

Uploading to kdp characters appear finally with the right size in the online preview.

Congratulations, good work!!

And a final aclaration; when you omit a unit in "font-size" in that context (text inside a svg image) -for default- the unit is "pixel" (as when you use "width" and "height" inside a <img> tag; you write -for example- width="180" without any unit but that means pixels)

zonker · 08-12-2014, 10:18 AM

Quote:

Originally Posted by RbnJrg

And a final aclaration; when you omit a unit in "font-size" in that context (text inside a svg image) -for default- the unit is "pixel" (as when you use "width" and "height" inside a <img> tag; you write -for example- width="180" without any unit but that means pixels)

Thanks, my knowledge of svg is "impressionistic"...as you could see

dgatwood · 08-22-2014, 04:41 AM

Quote:

Originally Posted by zonker

I
But in "3.6.10 Image Guideline #10: Displaying Text Correctly within SVG" of "Amazon Kindle Publishing Guidelines" I found that:

Quote:

To display text correctly within an SVG, use the font-size attribute for <text> inside the SVG.
Example
Code:
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="20" y="20" font-size=20 fill="red">svg text sample</text>
</svg>
</body>
</html>

I really can't imagine why the Kindle image guidelines recommend that. Yes, font-size is a legal attribute on an SVG text tag, but in practice, the tools I've used to produce SVG output all use CSS attributes on a tspan tag instead. And it works just fine in every version of Kindle's actual reader software that I've tried. (That said, I've never tried their online previewer.)

If any Kindle reader fails to handle something as simple as an inline style on an SVG tag, then it really can't be said to support SVG... or HTML, for that matter. That would be such a laughable omission of such basic HTML functionality that even non-programmers should feel justified at mocking their entire engineering team mercilessly if such a bug went uncorrected.

So I'm pretty sure that these are not the droids you're looking for, and that if their online previewer is butchering the formatting in this way, it is simply doing something very wrong. With that said, it might be worth dropping a note to the KDP people asking for clarification on that. There's certainly no legitimate reason why CSS styles on SVG elements should be ignored, but if there are known bugs somewhere, it would be nice to know it so we can add it to the rather long list of known eBook reader CSS handling bugs that has been steadily growing over on the wiki site.

BTW, with regards to the Kindle DX, the way you solve that is pretty straightforward. First, in your CSS, declare two media rules containing two styles apiece:

Code:

@media amzn-mobi {
        .kf8only {
                display: none;
        }
        .mobionly {
                display: inline;
        }
}
@media amzn-kf8 {
        .kf8only {
                display: inline;
        }
        .mobionly {
                display: none;
        }
}

Then wrap the SVG content in <span class="kf8only">...</span> and wrap a basic, HTML-formatted title page in <span class="mobionly">...</span>.

When you view the page on older, pre-KF8 Kindle readers, you'll get the simplified title page, which won't be as neatly formatted, but at least the information will be there. And when you view it on a newer, KF8-compatible reader, you'll get the nice SVG title page.

zonker · 08-22-2014, 04:56 AM

Quote:

Originally Posted by dgatwood

First, in your CSS, declare two media rules containing two styles apiece:

Yes, I already use that declaration, because on older kindle (or on kindle app for ios) svg title page doesn't appeat at all, so I wrote one with simple html code.

Then I don't know why amazon guidelines recommend that, I only know that on my kindle (5) it works only that way, otherwise texts appear very small.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub on IPad: SVG-graphics don't show.	georg3200	Apple Devices	19	07-10-2013 02:41 PM
Centering SVG graphics in iBooks?	FunkeXMix	ePub	8	01-04-2013 09:21 PM
Which is the best way to add SVG (vector graphics) to PDF files ?	DSpider	PDF	0	04-01-2011 07:27 PM
Converting SVG graphics	navels	Sigil	5	03-15-2011 09:58 PM
Epub with full page graphics only zooming issue	JonDeus	Nook Color & Nook Tablet	10	03-10-2011 02:33 PM

Advert

Advert