:firstletter

roger64 · 12-07-2014, 08:16 AM

Hi

Some years ago, if I remember, ADE 1.7. did not agree with :firstletter. It seems it now can use it.

So, imagine a book with h1 chapters. I wish to insert some dropcaps.

Code:

h1 + p {color:red;}

paints the first paragraph following a h1 title in red.

Code:

.firstletter:first-letter {color:red;}

does the same trick for the first letter of a paragraph.

Question: I would like to insert a CSS code which gives a

Code:

class="firstletter"

to the first paragraph of each h1 title. Or maybe I need a regex for that? I am confused.

Toxaris · 12-07-2014, 09:10 AM

:firstletter is still not supported in ePUB2, so don't count on it working for readers...

You could try:

Code:

h1 + p.firstletter:first-letter {color:red;}

That should work I think for readers that support this.

Jellby · 12-07-2014, 09:11 AM

Quote:

Originally Posted by roger64

Code:

.firstletter:first-letter {color:red;}

does the same trick for the first letter of a paragraph.

Only for paragraphs (or any other element) with class="firstletter".

Quote:

Question: I would like to insert a CSS code which gives a

Code:

class="firstletter"

to the first paragraph of each h1 title. Or maybe I need a regex for that? I am confused.

You can use selectors:

Code:

h1 + p:first-letter {color:red;}

This makes red the first letter or any paragraph immediately following an h1, whatever their classes are.

But, even if first-letter is supported, it's not flexible enough (for my needs), especially regarding punctuation preceding the first letter (think quotation marks, dashes, or Spanish question/exclamation marks), and cases where you need to use another element for the text following the first letter.

roger64 · 12-07-2014, 10:06 AM

OK

I thought the problem with first-letter use was just about ADE. I had the feeling :first-letter had been around for ages and did not know it was not EPUB 2 compliant.

Thanks for your answers, so the fruit is not yet ripe. For those who may be interested, I posted a nine minutes video -in French- on the French language forum about a more "classical" method to insert dropcaps (but it's mostly about writer2xhtml). I will keep this technique for sometime.

https://www.mobileread.com/forums/sho...&postcount=258

Jellby · 12-07-2014, 12:42 PM

Quote:

Originally Posted by roger64

I had the feeling :first-letter had been around for ages and did not know it was not EPUB 2 compliant.

It is ePub 2 compliant, as far as I remember. Reading systems are required to support all CSS 2 selectors, including pseudo-classes and pseudo-elements. Real life is different, though.

Toxaris · 12-07-2014, 02:38 PM

Quote:

Originally Posted by Jellby

It is ePub 2 compliant, as far as I remember. Reading systems are required to support all CSS 2 selectors, including pseudo-classes and pseudo-elements. Real life is different, though.

Is it? My mistake then. Never encountered that it was supported though...

Jellby · 12-07-2014, 02:56 PM

http://www.idpf.org/epub/20/spec/OPS...htm#Section3.1

Reading Systems must support all CSS2 selectors, including pseudo-elements and pseudo-classes. However, certain pseudo-classes may not be applicable to all Reading Systems (e.g. hover for devices with a touch screen) and may not result in any rendering on such devices.

And :first-letter is indeed a CSS2 selector:

http://www.w3.org/TR/2008/REC-CSS2-2.../selector.html

JSWolf · 12-07-2014, 03:00 PM

It does not work in Bluefire Reader which is using the RMDSK from ADE 3.x. It also does not work in ADE 2.01.

roger64 · 12-07-2014, 08:38 PM

Thank you all for these informations. :first-letter will wait...

12-07-2014, 08:16 AM	#1
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	:firstletter Hi Some years ago, if I remember, ADE 1.7. did not agree with :firstletter. It seems it now can use it. So, imagine a book with h1 chapters. I wish to insert some dropcaps. Code: h1 + p {color:red;} paints the first paragraph following a h1 title in red. Code: .firstletter:first-letter {color:red;} does the same trick for the first letter of a paragraph. Question: I would like to insert a CSS code which gives a Code: class="firstletter" to the first paragraph of each h1 title. Or maybe I need a regex for that? I am confused. Last edited by roger64; 12-07-2014 at 08:51 AM. Reason: code

12-07-2014, 09:10 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	:firstletter is still not supported in ePUB2, so don't count on it working for readers... You could try: Code: h1 + p.firstletter:first-letter {color:red;} That should work I think for readers that support this.

12-07-2014, 10:06 AM	#4
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	OK I thought the problem with first-letter use was just about ADE. I had the feeling :first-letter had been around for ages and did not know it was not EPUB 2 compliant. Thanks for your answers, so the fruit is not yet ripe. For those who may be interested, I posted a nine minutes video -in French- on the French language forum about a more "classical" method to insert dropcaps (but it's mostly about writer2xhtml). I will keep this technique for sometime. https://www.mobileread.com/forums/sho...&postcount=258 Last edited by roger64; 12-07-2014 at 10:22 AM. Reason: writer2xhtml

12-07-2014, 02:56 PM	#7
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	http://www.idpf.org/epub/20/spec/OPS...htm#Section3.1 Reading Systems must support all CSS2 selectors, including pseudo-elements and pseudo-classes. However, certain pseudo-classes may not be applicable to all Reading Systems (e.g. hover for devices with a touch screen) and may not result in any rendering on such devices. And :first-letter is indeed a CSS2 selector: http://www.w3.org/TR/2008/REC-CSS2-2.../selector.html

12-07-2014, 03:00 PM	#8
JSWolf Resident Curmudgeon Posts: 74,048 Karma: 129333562 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	It does not work in Bluefire Reader which is using the RMDSK from ADE 3.x. It also does not work in ADE 2.01.

12-07-2014, 08:38 PM	#9
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Thank you all for these informations. :first-letter will wait...

Advert

Advert