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 01-01-2013, 03:13 PM   #1
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 225
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Margins on Floating SVG

Okay, so I'm attempting to use a floating SVG image as the link to what would be a sidebar in the paper copy of a book. I've set the SVG image up like this:

Code:
<div class="icon">
    <svg height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" version="1.1" viewBox="0 0 200 200" width="200px">
      <image class="icon" width="100%" height="100%" xlink:href="../Images/field.svg"></image>
    </svg>
  </div>
Code:
.icon {
	float: right;
	display: block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
In spite of my attempts to set the margins at 0, however, there's quite a sizeable amount of space between the edges of the image and the text around it. What should I be doing to reduce that whitespace?
Rand Brittain is offline   Reply With Quote
Old 01-01-2013, 04:44 PM   #2
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 311
Karma: 1028382
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Try setting the height and width of the icon div to 200px. Beyond that, my guess would be whitespace in the image itself.

I recommend taking a look at the HTML page in a good web browser with a decent web inspector that shows all the different boxes in the box model (e.g. a WebKit-based browser, or Firefox with Firebug). Alternatively, add "border: 1px solid red;" to see where the image's bounding box actually is.

Oh, and another thing. I just noticed that you're floating the image to the right. If your paragraph style uses a ragged right margin, the right margin will appear larger because if an entire word doesn't fit, it gets kicked to the next line. Specifying a style that allows hyphenation can fix this. For example:

Code:
p {
        hyphens: manual;
        -webkit-hyphens: manual;
        -moz-hyphens: manual;
        -epub-hyphens: manual;
        adobe-hyphenate: auto;
}

Last edited by dgatwood; 01-01-2013 at 04:48 PM.
dgatwood is offline   Reply With Quote
 
Advertisement
Old 01-01-2013, 06:18 PM   #3
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 225
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Quote:
Originally Posted by dgatwood View Post
I recommend taking a look at the HTML page in a good web browser with a decent web inspector that shows all the different boxes in the box model (e.g. a WebKit-based browser, or Firefox with Firebug). Alternatively, add "border: 1px solid red;" to see where the image's bounding box actually is.
Blurgh, did this and it looks like the whitespace is in the image itself. Looking at this, can someone tell me if there's an easy way to remove it or if I'll have to call in someone with more photoshop-fu?

Code:
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="m0,0h512v512h-512z"/>
<g transform="matrix(18.68858,0,0,18.68858,-4020.68104,-6000.48285)">
<path d="m531.0372,404.564c0,7.4688-6.0546,13.5234-13.5234,13.5234s-13.5234-6.0546-13.5234-13.5234 6.0546-13.5234 13.5234-13.5234 13.5234,6.0546 13.5234,13.5234z" fill="none" stroke="#fff" stroke-width="1.0479" transform="matrix(.91335,0,0,-.91335,-243.74502,704.31322)"/>
<path d="m217.6201,339.8686c7.4964-1.0428 15.0449-1.3022 22.6973,0-3.233,9.0688-19.234,9.7148-22.6973,0z" fill="#fff" fill-rule="evenodd"/>
<path d="m217.5938,330.0938c2.2793,1.146 7.5416-.5858 11.5,1.0312-.7265-.6797-1.5579-1.0706-2.4375-1.3125 2.2881.2469 5.4462-.6991 8.6875.625-.7164-.6702-1.5403-1.0381-2.4062-1.2812-1.6726-1.4122-3.8165-1.5223-5.875-1.4688-2.2524-1.6154-5.28-1.1499-7.7527-1.1317l-1.716,3.5379z" fill="#fff" fill-rule="evenodd"/>
<path d="m235.375,331.4062c.4407.4296 1.0244.6438 1.7188.7812-2.5803.0571-5.0504.2924-6.6562-.625 .473.7605 1.0767,1.2412 1.7812,1.5312-1.0682-.0232-2.0587-.172-2.9375-.5938 1.4357,1.6291 3.6973,1.6384 6.125,1.4062 1.8494.6727 4.002.7748 6,.625l-.1562-1.1875-.3438.0312-.4375-1.9688c-1.2034.4251-3.9922.272-5.0938,0z" fill="#fff" fill-rule="evenodd"/>
<path d="m228.5938,325.0938c.8374,1.5084 2.2497,1.5614 3.9612,1.4688 1.2547,1.5343 3.4246.9217 5.9138.9062l-.7532-1c-2.9347-1.8659-7.0466-.0469-9.1218-1.375z" fill="#fff" fill-rule="evenodd"/>
<path d="m217.1563,338.3621c5.7852-1.5501 17.1559-1.7083 23.5313,0" fill="none" stroke="#fff"/>
<path d="m219.5625,335.5809 1.2812,4.7188" fill="none" stroke="#fff"/>
<path d="m223.1138,334.8621 .4911,4.5938" fill="none" stroke="#fff"/>
<path d="m238.6362,335.9246-1.2812,4.7188" fill="none" stroke="#fff"/>
<path d="m235.0536,335.2059-.4911,4.5938" fill="none" stroke="#fff"/>
<path d="m231.0559,334.7996-.1831,4.5938" fill="none" stroke="#fff"/>
<path d="m227.029,334.6434 .1831,4.5938" fill="none" stroke="#fff"/>
</g>
</svg>
Rand Brittain is offline   Reply With Quote
Old 01-01-2013, 06:21 PM   #4
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 225
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
On the other hand, viewing the SVG in Firefox doesn't show any whitespace, which makes sense since there shouldn't be any. What else could I be doing wrong?
Rand Brittain is offline   Reply With Quote
Old 01-01-2013, 07:59 PM   #5
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,724
Karma: 5072190
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
I see you have a viewport of 512 pixels but some of the values of the data are larger than that. Perhaps it is being scaled in the eBook with a simplistic scale factor which is leaving whitespace. Just a guess. But you might try drawing it so that it does not need scaling.
DaleDe is offline   Reply With Quote
Old 01-01-2013, 08:50 PM   #6
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 311
Karma: 1028382
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
I'm not seeing any spacing around the image when I view just the snippets you have above in Safari with paragraphs of text after it. So whatever is happening, it's probably somewhere in your CSS other than in the bits posted above.
dgatwood is offline   Reply With Quote
Old 01-01-2013, 10:47 PM   #7
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 225
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Quote:
Originally Posted by dgatwood View Post
I'm not seeing any spacing around the image when I view just the snippets you have above in Safari with paragraphs of text after it. So whatever is happening, it's probably somewhere in your CSS other than in the bits posted above.
Hm. See anything that could cause the issue?

Code:
@page {
	margin-top: 5pt;
	margin-bottom: 5pt;
}

body {
	display: block;
}

blockquote {
	margin-left: 0;
	margin-right: 0;
	text-indent: 0;
	}

.bold {
	font-weight: bold;
}

.break1 {
	margin-top: 1em;
	}
	
.break2 {
	margin-top: 2em;
}

.break-before {
	page-break-before: always;
}

.center {
	text-align: center;
	text-indent: 0;
}

.clean {
	text-indent: 0;
}

.footnote {
	page-break-before: always;
	padding-top: 10%;
	font-size: 0.85em;
}

.fullbox {
	page-break-before: always;
	padding-top: 2.0em;
	display: block; 
	padding-bottom: .25em;
}

.fullpage {
	page-break-before: always;
	page-break-after: always;
	padding-top: 25%;
}

.fullpageA {
	page-break-after: always;
	padding-top: 25%;
}

.gallery {
	height: 20%;
	page-break-after: always;
}

.galleryi {
	max-width: 100%;
	max-height: 80%;
}

.galleryii {
	max-width: 100%;
	max-height: 100%;
}

h1, h2, h3, h4, h5 {
	text-align: center;
	text-indent: 0;
	margin-bottom: 1.0em;
	margin-top: 1.0em;
}


h1.title {
text-align: center; 
margin-top: 2.0em; 
margin-bottom: 1.0em; 
font-size: 2.5em;
	}
	
h2.author {
text-align: center; 
margin-top: 1.0em;
	}

h4.year {
text-align: center; 
margin-top: 2.0em;
	}

.icon {
	float: right;
	display: block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

li.defining {
	list-style-image:url("../Images/defining-bullet.png");
}

li.dramatic {
	list-style-image:url("../Images/dramatic-bullet.png");
}

li.heroic {
	list-style-image:url("../Images/heroic-bullet.png");
}

li.lurid {
	list-style-image:url("../Images/lurid-bullet.png");
}

li.passionate {
	list-style-image:url("../Images/passionate-bullet.png");
}

li.pastoral {
	list-style-image:url("../Images/pastoral-bullet.png");
}

li.ritual {
	list-style-image:url("../Images/ritual-bullet.png");
}

li.setting {
	list-style-image:url("../Images/setting-bullet.png");
}

.iconic-title {
	page-break-before: always;
	padding-top: 20%;
}

.iconic-image {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.0em;
	max-width: 30%;
}

.iconic-image-left {
	margin-top: 1.0em;
	max-width: 50%;
	float: left;
}

.iconic-image-right {
	margin-top: 1.0em;
	max-width: 50%;
	float: right;
}

.iconic-marker {
	font-style: italic;
	text-align: center;
	text-indent: 0;
	font-size: 85%;
	margin-top: 1.0em;
	page-break-after: always;
}

.italic {
	font-style: italic;
}

p {
	text-indent: 2.0em;
	margin-top: 0;
	margin-bottom: 0;
	text-align: justify;
}

p.missive {
	margin-left: 1em;
	margin-right: 1em;
	text-indent: 0em;
}

p.missive-indent {
	margin-left: 1em;
	margin-right: 1em;
	text-indent: 2em;
}

.right {
	text-align: right;
	}

.sidebar {
    border: 5px groove;
    display: block; 
    float: right;
    margin-bottom: 1%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    width: 40%;
    padding-bottom: .25em;
	 padding-left: 4px;
	 padding-right: 4px;
	 font-size: 0.8em;
}

.sidebarL {
    border: 5px groove;
    display: block; 
    float: left;
    margin-bottom: 1%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    width: 40%;
    padding-bottom: .25em;
	 font-size: 0.8em;
}

.sidebarLink {
/* Comment out the next line for linked sidebars; uncomment it for full ones. */
/*   display: none; */
	text-align: center;
	text-indent: 0;
	
}

.sidebarEll {
/* Comment out the next line for linked sidebars; uncomment it for full ones. */
/*  display: none; */
}

.sidebarTextB {
/* Uncomment the next line for linked sidebars; comment it out for full ones. */
  display: none; 
}

.sidebarpage {
	page-break-before: always;
	margin-top: 2.0em;
}

.small-caps {
	font-size: 85%;
	}

.snapshot {
	page-break-before: always;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	border-bottom: 2px solid black;
	text-align: left;
	font-style: italic;
}

span.subtitle {
	font-size: 80%;
	font-style: italic;
	font-weight: normal;
}

ul {
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}

ul.inner {
	margin-top: 0;
	margin-bottom: 0;
}
Quote:
I see you have a viewport of 512 pixels but some of the values of the data are larger than that. Perhaps it is being scaled in the eBook with a simplistic scale factor which is leaving whitespace. Just a guess. But you might try drawing it so that it does not need scaling.
How do you mean, precisely?
Rand Brittain is offline   Reply With Quote
Old 01-02-2013, 02:20 AM   #8
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,724
Karma: 5072190
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Quote:
Originally Posted by Rand Brittain View Post

How do you mean, precisely?
The view box is 512 but the first point in the path is 531, too big for 512 and the whole thing will need to be scaled.

Dale
DaleDe is offline   Reply With Quote
Old 01-03-2013, 02:48 AM   #9
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 225
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Quote:
Originally Posted by DaleDe View Post
The view box is 512 but the first point in the path is 531, too big for 512 and the whole thing will need to be scaled.

Dale
Isn't scaling normal for SVG images?
Rand Brittain is offline   Reply With Quote
Old 01-03-2013, 09:14 AM   #10
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 311
Karma: 1028382
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by DaleDe View Post
The view box is 512 but the first point in the path is 531, too big for 512 and the whole thing will need to be scaled.

Dale
Not if the viewer was written correctly. The viewBox in SVG is equivalent to PostScript's BoundingBox. The content inside the viewBox is scaled to fit the height and width of the enclosing element. Anything outside that box probably doesn't get drawn, but if it is drawn, it is drawn outside the bounds of the CSS box defined by the enclosing element.

Last edited by dgatwood; 01-03-2013 at 09:53 AM.
dgatwood is offline   Reply With Quote
Old 01-03-2013, 12:16 PM   #11
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,724
Karma: 5072190
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Quote:
Originally Posted by Rand Brittain View Post
Isn't scaling normal for SVG images?
Of course but it could account for the extra margin the user is complaining about. Then again it might not be but something is causing the margin.

Dale
DaleDe is offline   Reply With Quote
Old 01-03-2013, 08:51 PM   #12
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 311
Karma: 1028382
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by DaleDe View Post
Of course but it could account for the extra margin the user is complaining about. Then again it might not be but something is causing the margin.

Dale
If so, then I'd expect it to be possible to fix it by adding a clipPath element.

http://sawyerhollenshead.com/writing...-svg-clippath/
dgatwood is offline   Reply With Quote
Old 01-04-2013, 03:09 AM   #13
Rand Brittain
Bookmaker
Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.Rand Brittain can eat soup with a fork.
 
Posts: 225
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Hm. Is there a simpler way to get a scaling image to float off to one side with its size set as a specific percentage of the page width?

I mean, I guess if I have to I can just convert it into a PNG of about the right size, but being able to do it this way was supposed to be what SVG is for.
Rand Brittain is offline   Reply With Quote
Reply

Tags
svg

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
floating by! euterpe Introduce Yourself 4 04-01-2012 06:37 PM
'Floating' illustrations lindsayw Workshop 10 08-31-2011 11:33 PM
Just an idea: floating DRM tho General Discussions 18 07-19-2011 04:07 AM


All times are GMT -4. The time now is 08:22 PM.


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