07-28-2012, 02:30 PM | #16 | |
Resident Curmudgeon
Posts: 73,661
Karma: 127838198
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
07-29-2012, 01:26 PM | #17 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
One thing I noted is that this only works if the first paragraph is not wider than a line. If it is larger than a line, the next paragraph skips down and starts on the second line. This makes it worse than if you just made the first a left paragraph and the second a right paragraph, by making it inconsistent. This is in laying out a series of quotes, with the author as a right align after the quote.
|
07-29-2012, 10:54 PM | #18 |
Junior Member
Posts: 1
Karma: 10
Join Date: Jul 2012
Device: none
|
The code below is the css for doing what you want.
<div style="width:80%;margin:0px auto;text-align:center;"><h1 style="float:left;">This is on the left</h1><h1 style="float:right;">This is on the right</h1></div> <div style="clear:left;"> </div> <p>As you can see about, it's done.</p> |
07-30-2012, 01:47 AM | #19 |
Wizard
Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
this is going to go pear shaped once it's put onto a small e-reader with user selected large font, as there simply will not be room on the line.
surely better to use 2 separate lines, for max e-reader compatibility |
07-30-2012, 10:19 AM | #20 |
Connoisseur
Posts: 54
Karma: 37363
Join Date: Aug 2011
Location: Istanbul
Device: EBW1150, Nook STR
|
Another style that works with ADE is inline-block.
Example: |
07-30-2012, 02:23 PM | #21 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
@cybmole - I haven't tested this on a device yet, but based on messing with margins in Sigil, i don't think it should be much of a problem. Indeed, if the screen is too small to accommodate the groups, it'll just end up doing naturally what your proposing: it'll split them into two line, one above the other.
@Timur - that's a really useful display property that I hadn't heard of before, and which, incidentally, looks like it would bypass the screen size problem while still maintaining two adjacent columns of text, so extra rockstar points for you! |
07-30-2012, 02:41 PM | #22 | |
Berti
Posts: 1,196
Karma: 4985964
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
|
Quote:
|
|
07-30-2012, 03:24 PM | #23 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Meaning that reading systems are not required to support it, and they still can call themselves ePub-compliant.
But we have reading systems that do not support "required" features, and they call themselves ePub-readers, so I don't think anyone cares much. |
08-02-2012, 04:05 AM | #24 | |
Bookmaker & Cat Slave
Posts: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
And the only thing I ever care about is: does it actually WORK? We long ago gave up trying to "please" all devices; it's simply not possible. But we go for the biggies--Amazon, Nook & iBooks, along with Kobo and Sony. After that, we can't manage; too many devices with too many weirdnesses (and don't get me started about reading apps, particularly on iPad and Droid tabs/phones!). Hitch |
|
10-17-2012, 03:31 PM | #25 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
so, it seems this is failing on ADE and on Sony readers.... any ideas as to why?
The first image is of the HTML code, the second is of the relevant css, the third is the BV result in Sigil (and, obviously, calibre), and the fourth is the result in ADE (which, as I've been told, is the same result rendered on Sony readers). |
10-17-2012, 04:55 PM | #26 | |
Berti
Posts: 1,196
Karma: 4985964
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
|
Quote:
Whats class "heading3" ??? ("The style of the outher div"...) Last edited by mmat1; 10-17-2012 at 04:58 PM. |
|
10-17-2012, 05:01 PM | #27 | |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
Quote:
http://css-tricks.com/left-align-and...the-same-line/ Code:
.heading3 { margin-bottom: 3em; margin-top: 0.5em; } |
|
10-17-2012, 09:17 PM | #28 |
What the Dog Saw
Posts: 311
Karma: 981684
Join Date: Jul 2008
Location: Dunn Loring
Device: Sony PRS-650, Surface3
|
|
10-18-2012, 12:39 AM | #29 |
Addict
Posts: 320
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
@ yekim54— well, that did the trick. do you (or anyone else) have any idea why? A "<br />" instead of an " " didn't work, so I'm curious....
|
10-18-2012, 02:32 AM | #30 |
Wizard
Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
ADE / sony ignore empty lines i.e. those with just <br />
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
epub code snippets (html / css) | zelda_pinwheel | ePub | 196 | 10-09-2016 04:21 AM |
Importing css in html files | shotsky | Conversion | 6 | 07-14-2012 05:34 PM |
HTML/CSS for (German) s p a c e d o u t emphasis | frabjous | Workshop | 21 | 05-16-2011 04:52 PM |
Small html/css bug | twaits | Calibre | 5 | 01-12-2010 10:26 AM |
HTML and CSS for Dummies | weedfreak | Sigil | 17 | 01-07-2010 09:34 PM |