Quote:
Originally Posted by Brett Merkey
@roger64:
<<I intended to give them a specific span (i'ts for the small text which follows a drop-cap and is usually wirtten in small-caps)>>
Lots of people code the first line like that and I wonder why. It appears to be a lot of bother and the result is clumsy and ugly. Your device is the PW3. All Kindles I have coded for support the CSS pseudo elements.
Why not just give the first paragraph in the chapter a class — and let the device do the hard work seamlessly with ::first-line and ::first-letter pseudo elements based on that class?
|
Thanks for your interest. There are indeed some reasons...
- I have a PW3 but it happens that I am an exclusive Koreader user (and ePub user). Long life to jailbreaks! So, I have absolutely no experience with Amazon formats.
- ::first-line and ::first-letter were far from being universally supported among ebook readers when I looked for a way to do it. Admittedly, this may have changed.
- I use a special Display font for drop-caps only.
- You may judge it "clumsy and ugly" and this may be so but, please, wait to see it before judging it.
- I embed fonts and I set up a line-height for paragraphs. Obviously, the end result will vary if you modify any of these two elements.
clumsy:
1.
drop-caps.
I select between a two lines or a three lines display.
I use just one regex to set up all the drop-caps by inserting simultaneously a double span. I just need the closing tag of an h2 title to start with. Once it's done, I like to differentiate between capitals because some of them have a peculiar shape. "Long" capitals (Q, Ç, J) deserve a special span (from let2 to let4).
2.
additional text (small-caps).
As this is a variable text, unhappily I need to proceed one file at a time... It can't be much different elsewhere. I also use a peculiar span with A and L drop-caps, to move this text slightly on the left and avoid a disgraceful white space (from smcpTypeV to smcpTypeA).
Here are the two regex I use in .json format (Calibre editor)
ugly
Now you can judge from the following screenshots, one example with a drop-cap on two lines, a second with a three-lines drop-cap.