Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 02-22-2012, 04:24 AM   #1
Chang
Connoisseur
Chang began at the beginning.
 
Posts: 77
Karma: 34
Join Date: Oct 2009
Device: none
SVG style sheets in EPUBs

My conclusion is that ADE and iBooks (webkit) reading systems are unable to read external SVG style sheets. I'm talking about this:
Code:
<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
I was also unable to get inline style sheets working:
Code:
<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?
Code:
<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?
Chang is offline   Reply With Quote
Old 02-22-2012, 07:14 AM   #2
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 8,930
Karma: 40404050
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
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.
DiapDealer is online now   Reply With Quote
Old 02-22-2012, 08:26 AM   #3
Chang
Connoisseur
Chang began at the beginning.
 
Posts: 77
Karma: 34
Join Date: Oct 2009
Device: none
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.
Chang is offline   Reply With Quote
Old 02-22-2012, 09:20 AM   #4
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 8,930
Karma: 40404050
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
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?
DiapDealer is online now   Reply With Quote
Old 02-22-2012, 01:29 PM   #5
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,916
Karma: 3022969
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
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.
Toxaris is offline   Reply With Quote
Old 02-22-2012, 01:53 PM   #6
mmat1
Det
mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.
 
mmat1's Avatar
 
Posts: 949
Karma: 1119522
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
Quote:
Originally Posted by Chang View Post
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...
mmat1 is offline   Reply With Quote
Old 02-22-2012, 04:13 PM   #7
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,916
Karma: 3022969
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
ADE-based readers can handle SVG. At least, my old PRS-300 can and that one is ADE based.
Toxaris is offline   Reply With Quote
Old 02-23-2012, 05:00 AM   #8
Chang
Connoisseur
Chang began at the beginning.
 
Posts: 77
Karma: 34
Join Date: Oct 2009
Device: none
Quote:
Originally Posted by DiapDealer View Post
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.

Quote:
Originally Posted by mmat1 View Post
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.
Chang is offline   Reply With Quote
Old 02-23-2012, 07:08 AM   #9
mrmikel
Book Twiddler
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,000
Karma: 1424479
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
Is there a chance the thing is burping because one typeface is sans-serif and the other is serif?
mrmikel is offline   Reply With Quote
Old 02-23-2012, 07:54 AM   #10
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 1,912
Karma: 4632610
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Chang View Post
Example:
Code:
.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".

Code:
font-family: "Baskerville", Arial; /* should work */
However, the quotes around Baskerville are redundant.
Doitsu is offline   Reply With Quote
Old 02-23-2012, 11:00 AM   #11
KLUTCH
Enthusiast
KLUTCH began at the beginning.
 
KLUTCH's Avatar
 
Posts: 29
Karma: 22
Join Date: Oct 2010
Location: London
Device: Kindle, iPad, iPhone 4, HTC Desire
With SVG it's always a good idea to keep the styling inline (i.e. on the tspan)
KLUTCH is offline   Reply With Quote
Old 02-24-2012, 09:41 AM   #12
dwig
Guru
dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.
 
dwig's Avatar
 
Posts: 964
Karma: 1382338
Join Date: Dec 2004
Location: Paradise (Key West, FL)
Device: Current:Dell Venue 8 Pro, Kindle 3/WiFi - Retired:Clie UX50, T415, ...
Quote:
Originally Posted by Chang View Post
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.
dwig is online now   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Examples of ePubs with SVG? wallcraft ePub 10 12-09-2011 01:21 PM
style sheets bramwell1922 Sigil 11 11-16-2011 03:05 PM
Sigil Style Sheets crutledge Sigil 3 10-06-2010 08:48 AM
Mobi TOC style vs ePub style? phearlez Kindle Formats 3 04-11-2010 06:35 AM
Reference Lie, Hakon & Bos, Bert: Cascading Style Sheets, level 1. IMP. v1.0 4 Sept 2007 DaleDe IMP Books 0 09-04-2007 02:12 PM


All times are GMT -4. The time now is 05:37 PM.


MobileRead.com is a privately owned, operated and funded community.