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 12-09-2012, 11:45 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: 236
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Two Neighboring SVG Tags

So, I've been putting together a book with frequent title/icon combinations, and I've been putting the icon PNGs in an SVG tag to make sure they size right. So far, it's worked pretty well.

But now, I've run into a title with two icons, and I've been trying to figure out how to make them display side-by-side. They don't seem to want to do it.

Here's the title page:

Code:
<h2 class="iconic-title" title="Adversity">O<span class="small-caps">UTSIDE-</span>D<span class="small-caps">UST</span> T<span class="small-caps">REATMENT</span></h2>

  <div class="iconic-image-left">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 511 553" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="553" width="511" xlink:href="../Images/Pastoral.png"></image>
    </svg>
  </div>

  <div class="iconic-image-right">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 475 542" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="542" width="475" xlink:href="../Images/Heroic.png"></image>
    </svg>
  </div>

  <p class="iconic-marker">Shared Action or Adversity</p>
And here's the CSS:

Code:
.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;
}
What am I doing wrong?
Rand Brittain is offline   Reply With Quote
Old 12-10-2012, 02:31 AM   #2
DSpider
Evangelist
DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.
 
DSpider's Avatar
 
Posts: 427
Karma: 326969
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
Instead of two images side by side, you can have one image, that contains both of them. Open both of them in your favourite image editor, resize the canvas for the first one and then paste the second image near it. But this could add to the overall ePub size if it's done too frequently.
DSpider is offline   Reply With Quote
Old 12-10-2012, 07:11 AM   #3
mrmikel
Color me gone
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,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
You might want to consider converting to jpg to save epub size, since you are very unlikely to see any image degradation on most epub reading devices.
mrmikel is offline   Reply With Quote
Old 12-10-2012, 07:13 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: 236
Karma: 9102
Join Date: Sep 2010
Device: Cybook Opus
Quote:
Originally Posted by DSpider View Post
Instead of two images side by side, you can have one image, that contains both of them. Open both of them in your favourite image editor, resize the canvas for the first one and then paste the second image near it. But this could add to the overall ePub size if it's done too frequently.
That is probably a much more sensible solution.
Rand Brittain is offline   Reply With Quote
Old 12-14-2012, 07:31 AM   #5
rtmyers
Member
rtmyers began at the beginning.
 
Posts: 24
Karma: 10
Join Date: Aug 2012
Device: iPad
You might want to try assigning the svg elements the CSS property "display: inline-block; " and see how that goes (instead of using floats). If you then wrap the two in a <div> with the "margin-left; auto; margin-right: auto; " trick, it ought to center the pair of images on the page. (You can put the 'display' property inline in the SVG element using the 'style' attribute, or if you want to do it with a CSS rule, since it's in a different namespace, try *|svg as the selector (or svg|svg, with a @namespace declaration as the top of your CSS file). To add space between the two images, just add a non-breaking space, or for other spacing alternatives you can try CSS properties such as word-spacing (the two SVG elements will be considered "words" for purposes of layout). Of course, since you seem to know exactly what the image sizes are, have you considered placing both images in a single SVG element and positioning them using x and y attributes?
rtmyers is offline   Reply With Quote
Old 12-14-2012, 08:10 AM   #6
mrmikel
Color me gone
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,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
rtmyers

It seems to me the more complicated you make it, the more likely it will fail in one reader or another.


Should it? No. But we are still in the days of the wild frontier and there is an unresolved issue between high powered tablets and low powered readers as well as no standardization between reading devices.
mrmikel is offline   Reply With Quote
Old 12-19-2012, 05:58 PM   #7
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: 313
Karma: 1028382
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
My knee-jerk reaction would be:

<table>
<tr>
<td width="50%">
<img width="100%" src=".../image1.svg" ... />
</td>
<td width="50%">
<img width="100%" src=".../image2.svg" ... />
</td>
</tr>
</table>

but maybe that's just me.
dgatwood is offline   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
Searching tags to show tags I want even when it has a tag I do not Jade Aislin Library Management 2 04-25-2012 02:01 PM
Calibre Tags & Aldiko Tags Not the Same Themus Calibre 3 03-21-2012 09:23 PM
<svg> to <img> tags conversion codrutoctavian Conversion 1 02-15-2012 10:58 PM
deleting tags from available tags list BeccaPrice Calibre 8 10-15-2011 12:39 PM
Amazon Tags - Popular tags vs Unique tags. chrisanthropic Writers' Corner 6 09-20-2011 12:18 AM


All times are GMT -4. The time now is 08:03 AM.


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