06-02-2013, 10:54 PM | #16 | |
Junior Member
Posts: 6
Karma: 6268
Join Date: Jul 2010
Location: NW Ohio
Device: Yes
|
Quote:
Code:
p:first-of-type::first-line { font-weight: normal; font-variant: small-caps; } One additional note: I didn't want the first line of the first <p> tag in the author's bib page and copyright page to have small caps. As such, I added a selector (p.chapstart:first-of-type::first-line) to limit this effect to certain pages. It may be somewhat inefficient and add more specificity than I'd like, but it worked and the author loved it so I shipped. /shrug |
|
06-03-2013, 03:50 AM | #17 | |
Bookmaker & Cat Slave
Posts: 11,451
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
Advert | |
|
06-03-2013, 10:13 AM | #18 |
Junior Member
Posts: 6
Karma: 6268
Join Date: Jul 2010
Location: NW Ohio
Device: Yes
|
Ah. I suppose so now on closer re-read. I was working off the thread title...
|
06-03-2013, 02:00 PM | #19 |
Bookmaker & Cat Slave
Posts: 11,451
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
08-12-2013, 04:24 PM | #20 |
Wizard
Posts: 1,529
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Something more about Drop Caps
Instead of starting a new thread I chose this one so that all the material on css3 is in one same place. I was experimenting with Drop Caps and since the .kf8 format supports many -webkit- properties I could get some interesting effects regarding this kind of letters. As that matter could be useful to someone else in this forum I thought in posting what I did.
First at all, in my .css stylesheet I used the following selectors (and properties): Code:
p { text-indent: 0; text-align: justify; } .float_back1 { float: left; width: 1em; height: 1em; font-size: 3.5em; text-align: center; margin: 0.1em 10px -0.1em 0; background: #BA3C0B; border: 5px double white; } .float_back2 { float: left; width: 1em; height: 1em; font-size: 3.5em; text-align: center; margin: 0.1em 10px -0.1em 0; background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#BA3C0B), color-stop(88%,#BA3C0B), color-stop(89%,white), color-stop(100%,white)); } .float_back3 { float: left; width: 1em; height: 1em; font-size: 3.5em; text-align: center; margin: 0.1em 10px -0.1em 0; background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffa73d), color-stop(50%,#ffa73d), color-stop(51%,black), color-stop(100%,black)); } .dropcap1 { position: relative; top: -0.2em; font-family: sans-serif; font-weight: bold; color: white; } .dropcap2 { position: relative; top: -0.2em; /* maybe here in same cases you should use -0.3em */ font-size: 0.9em; font-family: sans-serif; font-weight: bold; color: #FFFFC0; -webkit-text-stroke: 6px #ffa73d; /* with this property we can get hollows letters :) */ } Code:
<p><span class="float_back1"><span class="dropcap1">L</span></span>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p> <p><span class="float_back2"><span class="dropcap2">E</span></span>tiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p> <p><span class="float_back3"><span class="dropcap1">M</span></span>auris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl.</p> You can see my results (in Sigil and K4NT) below. Regards Rubén EDIT: Of course the angled corner can be any of them Last edited by RbnJrg; 08-12-2013 at 04:55 PM. |
Advert | |
|
08-12-2013, 04:58 PM | #21 |
Grand Sorcerer
Posts: 27,478
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Interestingly enough, I purchased a commercial ePub from Barnes & Noble that made extensive use of these CSS3 selectors, pseudo elements and webkit properties. Of course none of it worked on RMSDK-based readers/apps at all ... which is why I found it interesting that it was being sold at the Nook store (or do the Nook Tablets support this stuff?)
Seems to me that someone created the epub with the Kindle platform or iBooks/ePub3 in mind and decided to just let the ADE "chips" fall where they may (not that it rendered the ePub unreadable with ADE, by any means). Bold statement or just ignorance? It was Robert McCammon's novella "I Travel By Night" if anyone's interested. The HTML was excitingly clean. |
08-12-2013, 05:18 PM | #22 | |
Bookmaker & Cat Slave
Posts: 11,451
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
I'm not kidding, I'm starting to think that Albert has the right idea...do more with less, not more with more. I know my bookmakers won't like it, but... I don't mind the (ahem) premature grey, but I do object to the prematurely-dead-from-stress. Hitch |
|
08-16-2013, 12:37 PM | #23 | |
Junior Member
Posts: 6
Karma: 6268
Join Date: Jul 2010
Location: NW Ohio
Device: Yes
|
Quote:
Yes... his work is top-shelf. |
|
08-16-2013, 01:20 PM | #24 |
Grand Sorcerer
Posts: 27,478
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Cool. And like I said, it didn't really make that much difference when reading on an ADE device. That special first-letter/first-line stuff just rendered as normal text where it wasn't supported. It's just that I'm just used to seeing ePub creators cater more to the ADE crowd. Maybe things are changing a bit.
|
08-16-2013, 01:30 PM | #25 |
Junior Member
Posts: 6
Karma: 6268
Join Date: Jul 2010
Location: NW Ohio
Device: Yes
|
It's not a bold statement, either. The developer/designer just tries to make great looking ebooks. He does much as he can to allow things fail gracefully, while keeping an eye on cost/schedule effectiveness for the publisher (namely, maintaining a single source and a style standard that doesn't vary much from book-to-book regardless of the author).
His personal thoughts on RMSDK, which are similar to mine, is if the book ain't broke and is still otherwise well-designed, the reader's experience isn't going to be warped by pseudo-classes/webkit stuff/etc not showing up. And given the way people have divided into device camps, readers using Nooks are probably not going to know their copy looks different than their counterparts using Kindles and iBooks. |
08-16-2013, 02:02 PM | #26 |
Grand Sorcerer
Posts: 27,478
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Makes perfect sense to me.
Feel free to pass along my two-thumbs-up. |
09-13-2013, 02:26 PM | #27 |
Connoisseur
Posts: 62
Karma: 640495
Join Date: Jul 2012
Location: Germany
Device: Kindle Touch, Android smartphone w/ FBReader
|
:not() works too!
First of all, Doitsu, thanks for making this list! As someone who loves tweaking the CSS of his e-books, this is great news. Also, thanks to you, PoP and RbnJrg for your beautiful example snippets and screenshots!
Now you can add the :not() pseudo-class to the list . I was tweaking an EPUB before putting it on my kindle via kindlegen and wanted consistent paragraph indentation with the margins removed. First I set up the formatting (all text body paragraphs already had the para class set, so I sent with that): Code:
.para { display: block; margin: 0; text-indent: 5%;} Code:
p:not(.opening-para):not(.para) + .para, :not(p) + .para { text-indent:0; margin-top: 1em;} Code:
p.caption + .para, p.image + .para, p.center + .para, div + .para, ol + .para, ul + .para So :not() definitely works when it contains a simple selector consisting of one class or element and using multiple :not() pseudo-classes on one element as well. I didn't need any other of the allowed simple selectors within a :not() pseudo-class, but I bet they work too! @William Ockham: I disagree. I actually think these pseudo-classes and pseudo-elements should absolutely be used in production e-books, just like 52novels and their colleague did (of course along with fall-back rules for essential formatting if MOBI7/EPUB on Nook etc. would otherwise look awful), as it is very unlikely the webkit versions used in future e-reader software and hardware iterations will support less of those very useful CSS3 features. KF8 is quite close to EPUB in its HTML5 and CSS3 support (even if Amazon don't admit how much CSS3 they actually already support yet – though kindlegen only erroring out on ::before with auto-incrementing counters and nothing else is kind of admitting support of all those selectors) and the more CSS3 support e-readers have, the better. The more of those practical CSS3 features are actually used in commercial e-books, the more rendering platforms will want to support them, too. Way to many e-books have appalling markup and stylesheets—floods of superfluous <div>s, <span>s and classes everywhere, inline style declarations, classes named non-semantically, <span>s with italics/bold classes instead of <em>s/<strong>s, no complex selectors at all … *cringe* Makes for terribly inflexible and hard to change stylesheets. The more of those CSS3 selectors are broadly supported in e-readers, the easier it will be to markup and style e-books in an adaptable, easy-to-change-and-maintain way. Which ultimately leads to less cruft and faster rendering on e-readers, yay!</SoapBox> Last but not least – ::first-letter, ::first-line, ::before and ::after are pseudo-elements, not pseudo-classes. SCNR!</OCD> Last edited by Dylan Tomorrow; 09-13-2013 at 02:48 PM. Reason: typos, loads of them |
09-13-2013, 03:04 PM | #28 | |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Thanks for testing the :not pseudo selector.
Quote:
Terminology has never been my strong suit. |
|
09-13-2013, 03:05 PM | #29 |
Bookmaker & Cat Slave
Posts: 11,451
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Dylan:
What happens with those pseudo-elements on K7 devices? I know that everyone loves the K8 devices, and the pseudo-elements, and I agree, it's all cool at school, but for the millions of k7 devices still out there--millions--what's occurring when you use that with those? Do you simply get the base paragraph class? That's my surmise, but having just read this, I haven't tested it yet. Hitch |
09-13-2013, 03:54 PM | #30 |
Connoisseur
Posts: 62
Karma: 640495
Join Date: Jul 2012
Location: Germany
Device: Kindle Touch, Android smartphone w/ FBReader
|
@Doitsu: Awesome, thanks! I know, I just had to say it. SCNR!
BTW, how about you rename the thread into CSS 3 selector support in KF8? May make it easier to find for people. @Hitch: As for mobi7 devices, the mobi7 file viewed in calibre just keeps the indentations for those exceptions where I wanted them removed. One could just add the second more conventional selector I mentioned above (I made that one first and then reverse-engineered the :not() selectors from it because I like using the most elegant selectors possible). No problemo. I didn't test the Mobi7 on my KT. Here I just tweaked an e-book for my persona library. All e-books I convert from EPUB are converted to KF8 by default, so it doesn't concern me. I don't look back. But if I designed an ebook for sale, I would make sure to have fallback rules (except for the more cosmetic/fancy formatting like RbnJrg's Drop Caps people won't notice missing). |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Is the Kindle Keyboard (K3) ever going to get KF8 support? | apastuszak | Amazon Kindle | 25 | 12-05-2012 02:18 PM |
iPad Does Kindle App for iPad support KF8? | wiped | Apple Devices | 1 | 06-09-2012 01:44 PM |
KF8 and hyphenation support | pirl8 | Kindle Developer's Corner | 7 | 06-08-2012 10:59 AM |
KF8 conversion and support in Calibre? | Rhialto | Conversion | 19 | 01-16-2012 05:45 PM |
kf8 support | apastuszak | Calibre | 6 | 11-25-2011 09:22 PM |