04-11-2009, 06:56 AM | #1 |
Junior Member
Posts: 7
Karma: 10
Join Date: Mar 2009
Device: prs-505
|
Inline SVG questions (whitespace & other practices)
I've searched and searched and yet have not been able to come up with definitive answers to using SVG in epub files. I feel as though I've learned a lot about svg these past couple weeks, but still some answers elude me. Is there a guide to inline svg and epub files?
For example here is a snippet, for this example I have 3 basic lines of text - later examples will incorporate bezier curves. For reference I'm using Safari/Chrome to view the xhtml files and a sony PRS-505. Code:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:175; height:60px;" xml:space="preserve"> <svg:text x="15%" y="25%" style="font-family:Lucida Sans;white-space:pre;font-size:12px;text-decoration:underline">text</svg:text> <svg:text x="15%" y="25%" style="font-family:Lucida Sans;white-space:pre;font-size:12px;"> 2theright</svg:text> <svg:text x="5%" y="45%" style="font-family:Lucida Sans;font-style:italic;font-size:12px;">slightly left</svg:text> <svg:text x="10%" y="65%" style="font-family:Lucida Sans;white-space:pre;font-style:italic;font-size:12px;">slightly right</svg:text> Which fonts should I be using? Which fonts are monospace (important for my drawings since the numbers must line up vertically.) Minion Pro is an Open Font, but isn't monospace, Lucida Sans is - is there a list of Open Fonts which are monospace? How do I preserve whitespace? I have tried several different places to preserve whitespace. "xml:space= "preserve" doesn't seem to be doing anything. Neither does the "pre:" tag, nor does placing a [code] or [pre] tag before the [svg] tag. I have defined my xml doctype to be strict. Using " " 8 times in a row for 8 spaces doesn't help with the readability of the document Also I've seen some epub files use "<svg:svg xxx> <svg:text> </svg:text>" instead of "<svg> <text></text> </svg>" Is there a difference? Dimensions - should I be using % or px for the viewbox? I'm defining my columns to be about 350 pixels since the paragraphs are very short. If I define my drawings in pixels will it cause problems with reflow/zoom? For example will it keep the drawing the same size or cut parts off? Last edited by politicorific; 04-11-2009 at 06:02 PM. |
04-11-2009, 12:10 PM | #2 | |||||
Reticulator of Tharn
Posts: 618
Karma: 400000
Join Date: Jan 2007
Location: EST
Device: Sony PRS-505
|
Quote:
I'm afraid I don't follow... Quote:
That said, you don't need to use monospace fonts to ensure text alignment. Just construct your SVG so that the numbers are aligned. As far as I know, you don't. If you need pieces of text placed at particular points, place them there using separate SVG text elements. Quote:
That's actually incorrect. The XHTML doctypes specify only XHTML elements, which means that including SVG elements makes the document invalid. If you're using inline SVG, you can't declare a doctype. As a side-effect this means that you can't use any of the HTML character entities -- just include the characters themselves directly and encode as UTF-8 or UTF-16 (as the EPUB spec requires). Quote:
Quote:
|
|||||
Advert | |
|
04-11-2009, 06:58 PM | #3 | |||||
Junior Member
Posts: 7
Karma: 10
Join Date: Mar 2009
Device: prs-505
|
whoops, I had two examples differentiating the different svg styles, I removed it when it seemed a shorter question could be formed.
Quote:
Quote:
I still need a way to preserve whitespace. Quote:
Quote:
Quote:
For example, I'm defining page width as 350px (approximately 65-80 characters as most css documents suggest), then defining a table which has a column width of 60% (now 210px), and finally defining an svg with 50% width, the resulting image should be 105px? Yet, how do I define height, which can be infinite, must I continue to use px or pt? Last edited by politicorific; 04-11-2009 at 07:01 PM. |
|||||
04-12-2009, 12:11 AM | #4 | |||
Reticulator of Tharn
Posts: 618
Karma: 400000
Join Date: Jan 2007
Location: EST
Device: Sony PRS-505
|
Quote:
Hmm. If I'm reading the SVG spec correctly (Section 10.15 "White space handling"), using xml:space="preserve" should preserve spaces, but treat newlines like spaces. If that's not what you're seeing, then I'm afraid you've found a bug. Quote:
Quote:
First, although I'm not sure this is what're saying you are doing, you probably shouldn't be specifying your page-width at all, especially not in pixels. Although it's common practice Web documents, EPUB books are, well, books, and it's the job of the reader application to ensure that the text is at a readable width. If you want finer control over the page layout, Adobe has defined a separate stylesheet language which allows you to control the number of columns used for various display sizes. (Only AdobeDE understands these stylesheets ATM.) Second, yah, '%' in CSS units is a percentage of the parent box. So if you have a box that you've set up to consume 60% of the page-width, a width of 100% on any child boxes will consume the entire page-width. If you want to control image maximum size and proportion, check out the CSS max-height and max-width properties and the SVG preserveAspectRation attribute. With those together you should be able to ensure that your images reasonably consume whatever space is available. |
|||
04-12-2009, 01:35 AM | #5 |
speaking for myself
Posts: 139
Karma: 2166
Join Date: Feb 2008
Location: San Francisco Bay Area
Device: PRS-505
|
The following code code works in Digital Editions as well as Firefox and Opera (but not Safari).
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<p>Here is inline SVG:</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<g xml:space="preserve" font-size="10" font-family="monospace">
<rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"/>
<text x="30" y="20"> XXX </text>
<text x="30" y="30">X X</text>
<text x="30" y="40">X X</text>
<text x="30" y="50">X X</text>
<text x="30" y="60"> XXXX</text>
<text x="30" y="70"> X</text>
<text x="30" y="80"> X</text>
<text x="30" y="90"> XXX </text>
</g>
</svg>
<p>A paragraph after SVG</p>
</body>
</html>
|
Advert | |
|
04-12-2009, 07:44 AM | #6 | |
Junior Member
Posts: 7
Karma: 10
Join Date: Mar 2009
Device: prs-505
|
Quote:
I was misinformed that Digital Editions uses webkit to render svg, which makes my installation of Chrome and Safari pointless since the above example doesn't display properly, yet there appear to be several features of svg unimplemented in firefox. Even so, it's miles beyond IE which exhibits the type of parser overlap you describe when using object/embed tags to trick IE into displaying something, even if it is a "svg unsupported" message. Now I have a tough question, how would I mix and match different text styles in that svg code - for example, have some text underlined, italicized, or bolded? |
|
04-12-2009, 05:32 PM | #7 | |
speaking for myself
Posts: 139
Karma: 2166
Join Date: Feb 2008
Location: San Francisco Bay Area
Device: PRS-505
|
Quote:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <body> <p>Here is inline SVG:</p> <svg xmlns="http://www.w3.org/2000/svg" width="10em" height="10em" viewBox="0 0 100 100"> <g xml:space="preserve" font-size="10" font-family="monospace"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"/> <text x="30" y="20"> XXX </text> <text x="30" y="30">X X</text> <text x="30" y="40" style="font-style:italic">X X</text> <text x="30" y="50">X X</text> <text x="30" y="60" style="text-decoration:underline"> XXXX</text> <text x="30" y="70"> X</text> <text x="30" y="80"> X</text> <text x="30" y="90"> X<tspan style="font-weight:bold">XX</tspan> </text> </g> </svg> <p>A paragraph after SVG</p> </body> </html> Also, notice viewBox attribute and with/heights in em units. This makes SVG scale automatically when default font size changes (may or may not be something that you want). Peter Last edited by Peter Sorotokin; 04-12-2009 at 05:34 PM. Reason: addition |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Preferences & Cover Questions | Jabby | Calibre | 3 | 10-13-2010 09:04 PM |
New Kindle & Questions | gumhead | Amazon Kindle | 1 | 10-12-2010 11:24 AM |
TOC & other questions | PatNY | Sigil | 41 | 10-02-2010 10:46 AM |
iBooks: No Support for Selection & Copy/Paste Operations of SVG Texts on EPUB | reuben | ePub | 2 | 09-22-2010 08:06 AM |
questions about drm & calibre | nelson7lim | Calibre | 7 | 08-15-2010 08:55 PM |