SVG style sheets in EPUBs

[Chang]

My conclusion is that ADE and iBooks (webkit) reading systems are unable to read external SVG style sheets. I'm talking about this:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

I was also unable to get inline style sheets working:

<style type="text/css" >
   <![CDATA[
      .someclass {
         font-size: "25px";
      }
   ]]>
</style>

Only way to get SVG styles to work in ADE and iBooks (webkit) reading systems is to use inline SVG styles, am I right?

<text font-family="Baskerville" font-size="20">Sample text</text>

People who have used SVG styles in your EPUBs, am I right or just doing something wrong?

[DiapDealer]

What the heck are SVG styles?

If you're talking about regular old CSS styles, then I can assure you that they work in ADE (both external and inline style sheets, as well as inline styles). I can't begin to vouch for iBooks, but I know I've heard other people mention that one works better than the other, I just don't remember which.

I'm not sure what your first example is meant to be, but it's not the correct syntax for linking to an external CSS style sheet. This would be:

PHP Code:

<link href="svg-stylesheet.css" rel="stylesheet" type="text/css"  /> 


and it should be placed in the HEAD section of the html document (it also assumes that your external stylesheet is in the same folder as your (x)html document. Adjust the href accordingly if not)

It's hard to tell what may be wrong with your second example without seeing what HTML you are trying to style with it. But for starters... if you're going to go the CDATA route, then make sure you take it all the way (and it should be placed in the head section):

PHP Code:

<style type="text/css" >
   /*<![CDATA[*/
      .someclass {
         font-size: "25px";
      }
   /*]]>*/
</style> 


Your third example shouldn't work at all in any ePub reading system. Inline styles should take the form of:

PHP Code:

<p style="font-family:Baskerville;font-size:20px">Sample text</p> 


Which also assumes that the Baskerville font is available to the reading system. Otherwise, you'll need to switch to a style sheet and use @font-face-statements to properly embed the font. If not, the reader will use a default font of its own. Also, there is no <text></text> tag. The inline styles should be applied to <p>, or <div> or other valid elements.

[Chang]

Thank you for your reply! By SVG styles I mean the styles which can be used to style SVG elements
Some styles are same as in CSS but not all. Specification: http://www.w3.org/TR/SVG/styling.html and here are some tutorials I found with quick googling: Tutorial 1 and Tutorial 2.

[DiapDealer]

Sorry, I got confused when you were giving examples of somewhat generic (but syntactically incorrect) CSS2 text styling situations. Even if SVG styling is supported in ePub (and I have absolutely no idea if it is), why would you be trying to use it to style basic text?

[Toxaris]

I know that svg should be supported by ePUB readers. Most readers will render it, but not all. I wouldn't know about specific stylesheets, but I doubt it.

[mmat1]

Originally Posted by Chang

My conclusion is that ADE and iBooks (webkit) reading systems are unable to read external SVG style sheets.

I guess you are right.

Maybe chapter 2.5 at http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm" class="wikilink" title="MR Wiki entry">http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm are useful for you. There you'll find something about SVG within epub standard.

Are the devices you mentioned (ADE and iBooks) "SVG-ready"? There should be something written in the manual...

[Toxaris]

ADE-based readers can handle SVG. At least, my old PRS-300 can and that one is ADE based.

[Chang]

Originally Posted by DiapDealer

Even if SVG styling is supported in ePub (and I have absolutely no idea if it is), why would you be trying to use it to style basic text?

I'm making the text as scalable vector graphic so it will always be sharp, no matter how big or small the reader's screen is and the text needs to be in exact place on the page. I have children's book and the text needs to be inside a speech bubble. So, I'm using SVG elements to wrap my picture and then put text on that picture to correct places.

Originally Posted by mmat1

Maybe chapter 2.5 at http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm are useful for you.
Are the devices you mentioned (ADE and iBooks) "SVG-ready"? There should be something written in the manual...

Thanks for the link. I have checked that before and yeah, it mentions "CSS styling of SVG must be fully supported." Problem is that reading systems doesn't necessarily support everything what they should


I have been testing my SVG elements with ADE desktop reader, Sony PRS-505 (ADE RS) and iPad. Problem is that only SVG inline styles work but not inline or external style sheets. It's quite frustrating to write into every SVG text element the same styles

If I give a class for my SVG text element and style that class with normal CSS styles, some styles apply for that text element. For example, font-size works well but if I give two different font families, it doesn't work. Example:

PHP Code:

.someclass {
   font-size: "20px"; /* works perfectly */
}
.someclass {
   font-family: "Baskerville"; /* works perfectly */
}
.someclass {
   font-family: "Baskerville, Arial"; /* doesn't work */
} 


But if I give two font-families as an inline style for the SVG text element, it works. I guess I forgot to mention but all the SVG style sheets (inline or external) I tested, worked well on modern web browsers.

So, I'm still wondering am I doing something wrong or have other people ran into this same problem that inline and external SVG style sheets don't work at all and normal CSS style sheets in SVG elements work variously in EPUB reading systems.

[mrmikel]

Is there a chance the thing is burping because one typeface is sans-serif and the other is serif?

[Doitsu]

Originally Posted by Chang

Example:

.someclass {
   font-size: "20px"; /* works perfectly */
}
.someclass {
   font-family: "Baskerville"; /* works perfectly */
}
.someclass {
   font-family: "Baskerville, Arial"; /* doesn't work */
}

IMHO, the last line doesn't work because you put the closing quote after the second font name. AFAIK, quotes are only required if the font name consists of two or more words. E.g. "Times New Roman".

font-family: "Baskerville", Arial; /* should work */

However, the quotes around Baskerville are redundant.

[KLUTCH]

With SVG it's always a good idea to keep the styling inline (i.e. on the tspan)

[dwig]

Originally Posted by Chang

It's quite frustrating to write into every SVG text element the same styles ...

The write the document with a CLASS and use Search/Replace to globally replace it with an inline STYLE.