09-04-2013, 01:20 AM | #1 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34978132
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Div Selectors vs Paragraph Classes -- Robustness?
I am trying this out ----
I'm using selectors in <div>s to format paragraphs, so that I don't have to use many styles for lots of paragraphs. This can keep all the styling in the div, and feels much simpler. I am only using this method for short segments. For example, for some poetry that has altenating lines with deeper margins/indents: Code:
CSS: p { /*format for standard paragraph*/ margin: .25em 0; text-indent: 1.5em; } div.stanza { margin: 1.5em 10%; font-size: 90%; } div.stanza p { text-align: left; text-indent: -2em; } div.stanza p, div.stanza p+p+p, div.stanza p+p+p+p+p, div.stanza p+p+p+p+p+p+p { margin-left: 2em; } div.stanza p+p, div.stanza p+p+p+p, div.stanza p+p+p+p+p+p, div.stanza p+p+p+p+p+p+p+p { margin-left: 4em; } HTML: <div class="stanza"> <p>And from our deck sad eyes looked out</p> <p>Across the stormy scene:</p> <p>The tossing wake of billows aft,</p> <p>The bending forests green,</p> <p>The chickens sheltered under carts</p> <p>In lee of barn the cows,</p> <p>The skurrying swine with straw in mouth,</p> <p>The wild spray from our bows!</p> </div> Will this work in other situations, or did I just get lucky? Is this as "robust" as using different classes for each type of paragraph? Is it as widely compatible on different readers and apps? Or, does it not matter which method I use? |
09-04-2013, 06:31 AM | #2 |
Groupie
Posts: 171
Karma: 86271
Join Date: Feb 2012
Device: iPad, Kindle Touch, Sony PRS-T1
|
nice—i've never thought of using multiple adjacent sibling selectors like that.
i realize this doesn't really answer your question, but i've used simple h2 + p type adjacent sibling selectors quite a bit, and can't think of an epub reader that doesn't properly display them. it is valid CSS 2/2.1 (for what that's worth). here's a test book in case the nice people on mobileread want to help you crowdsource some tests: |
Advert | |
|
09-04-2013, 07:58 AM | #3 |
curly᷂͓̫̙᷊̥̮̾ͯͤͭͬͦͨ ʎʌɹnɔ
Posts: 3,007
Karma: 50506927
Join Date: Dec 2010
Location: ♁ ᴺ₄₅°₃₀' ᵂ₇₃°₃₇' ±₆₀"
Device: K3₃.₄.₃ PW3&4₅.₁₃.₃
|
This nᵗʰ sibling idea is clever, simple and elegant. Kind of a new CSS pseudo selector.
|
09-04-2013, 09:55 AM | #4 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
But does it work on the readers?
|
09-04-2013, 10:45 AM | #5 |
Well trained by Cats
Posts: 30,373
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Echo
Does it work on notoriously stubborn, commonly used devices/reading programs AND how bad will it be after conversion with converters like Calibre ? Doing this is a great academic exercise, but I can see repercussions if it falls blindly into use. |
Advert | |
|
09-04-2013, 10:59 AM | #6 |
Grand Sorcerer
Posts: 27,903
Karma: 198500000
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
To be honest: I don't think "calibre might have difficulty converting it" is a very compelling reason to NOT do something. I mean caveat convertor has always been the case, no?
|
09-05-2013, 12:24 AM | #7 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34978132
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Thanks to all for responding!
Well... I didn't know this CSS was unusual! I figured I just stumbled on something that everybody else (but me) knew about. I guess it might be best to use caution for the time being, and reserve this method for books for my personal use. I think I might post a poll requesting folks to test on different readers and apps, maybe it will turn out to be useful code. |
09-05-2013, 04:06 AM | #8 |
Grand Sorcerer
Posts: 5,635
Karma: 23191067
Join Date: Dec 2010
Device: Kindle PW2
|
@grannyGrumpy:
FYI, if you designed ePubs exclusively for iPads, current Kindle models, some Kobo devices and other Webkit based devices and apps, you could simply use nth-child pseudo-elements: Code:
p { margin: .25em 0; text-indent: 1.5em; } div.stanza { margin: 1.5em 10%; font-size: 90%; } div.stanza p:nth-child(odd) { margin-left: 2em; } div.stanza p:nth-child(even) { margin-left: 4em; } |
09-05-2013, 10:23 PM | #9 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34978132
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@Doitsu: That sounds so simple and lovely. I wonder if ePub3 will be widely supported anytime within this decade!
Since I only upload public domain books for free download, I guess I will continue to use the old tried & true CSS. sigh... |
09-06-2013, 06:55 AM | #10 |
Groupie
Posts: 171
Karma: 86271
Join Date: Feb 2012
Device: iPad, Kindle Touch, Sony PRS-T1
|
i tried this out on ADE and the sony desktop reader as well as PRST1 and it works across the board there. iBooks has no problem, as well as another 7 or so reader apps on the iPad. the iOS reader app i've come across so far that doesn't register the + + + + is Kobo app for ios.
i'd be interested to know if it's supported on the actual Kobo, though |
09-07-2013, 07:38 AM | #11 | |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
Quote:
I have it open on my Kobo Touch right now. The three sizes of text are visible, at increasing sizes, but the lines of text in each of the 3em and 4em levels run together - the top of the 4 in 4em reaches almost as high as the cross bar in the e in 'here's.' Perhaps increasing the line-height might help? |
|
09-28-2013, 07:59 PM | #12 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Are you having success with this on K4iOS? Our tests for adjacents (i.e., H3+p) on K4iOS have not been promising. Hitch |
|
09-29-2013, 01:37 AM | #13 |
Grand Sorcerer
Posts: 5,635
Karma: 23191067
Join Date: Dec 2010
Device: Kindle PW2
|
|
09-30-2013, 05:10 PM | #14 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
I did read your reply, and you did indeed specifically say ePUBs and KF8, but of course, Amazon keeps swearing that iOS is "gunna be" KF8 any second, which is why I asked--plus, there's no reason for me to think that everything we do is magically always right. (I wish). You might have had something up your sleeve! ;-) {sigh}. I'd love to use the selectors. But freaking K4iOS.... just making sure it wasn't us. Hitch |
|
10-08-2013, 08:49 AM | #15 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
For some time I've used the +++siblings for front pages, where font size and formatting varies from line to line. I've also found it handy on several other occasions.
I've been sorely tempted to drop the <p> tag altogether, and just use formatted <div>'s for paragraphs instead. It's so often I want to include some kind of block-style element inside a paragraph, only to yet again experience the epub/html validator sending me dirty looks... |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Robustness | JimLL | Sigil | 105 | 04-12-2012 03:11 AM |
keeping or removing a div with multiple classes | JohnsonZA | Recipes | 1 | 09-25-2010 10:33 AM |
Questions about <p> and <div> and paragraph spacing | droople | Sigil | 7 | 08-14-2010 12:03 PM |
DR800: robustness | alexxxm | iRex | 13 | 08-10-2010 04:17 AM |
ADE support for attribute-value based selectors? | dmapr | ePub | 0 | 08-06-2010 05:57 PM |