Drop caps

huebi · 03-02-2012, 03:44 PM

Hi,

drop caps - again. I know the code snippets in the sticky threads here. I'm struggling with chapter numbers, they should be drop caps and <h2> headings at the same time. Any ideas?

DiapDealer · 03-02-2012, 04:03 PM

I don't understand. Dropped in relation to what? The chapter title? Do you have an example of what kind of thing you're looking for?

Keroberos · 03-02-2012, 06:48 PM

Are you trying to get the effect thats shown in the attached image? If so you can do that by using a float.

huebi · 03-03-2012, 03:11 AM

The example shown by Kerberos is exactly what i want - and the 12 should be a <h2> heading.

Jellby · 03-03-2012, 03:59 AM

h2 { float: left; } should suffice.

huebi · 03-03-2012, 07:17 AM

Well, thats quire simple, but even with margin and padding set to zero its not really good, how can i raise the 1 a little bit without breaking everything when the user selected a different font size?

i just added border: 1px solid black to exactly see the box. Of course i can adjust the 1 with trial and error, but is there a proper way of aligning the paragraph and the heading vertical?

Keroberos · 03-03-2012, 11:55 AM

Were you wanting it to look like this? You can do that with negative margins.

Here's the CSS that I used for <h2>,

Code:

h2 {
float:left;
font-size:3em;
margin:-.3em 0 -.25em 0;}

You can play with the margin values to get the position exactly where you want it.

Jellby · 03-04-2012, 05:57 AM

Quote:

Originally Posted by huebi

Of course i can adjust the 1 with trial and error, but is there a proper way of aligning the paragraph and the heading vertical?

If you want exact alignment, no. Because what you can align is the "bounding box" of the characters, but how much space there is betweet the actual character and its bounding box depends on the font being used, and unless you embed both the heading and normal text fonts (not recommended) you can't know which font is going to be used.

But maybe you can get something approximate if you set "line-height: 1; vertical-alignment: top" in the heading.

huebi · 03-04-2012, 06:25 AM

Quote:

Originally Posted by Jellby

But maybe you can get something approximate if you set "line-height: 1; vertical-alignment: top" in the heading.

Well, this was a big step in the right direction. Thx.

03-02-2012, 03:44 PM	#1
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	Drop caps Hi, drop caps - again. I know the code snippets in the sticky threads here. I'm struggling with chapter numbers, they should be drop caps and <h2> headings at the same time. Any ideas?

03-02-2012, 06:48 PM	#3
Keroberos Zealot Posts: 128 Karma: 238654 Join Date: Aug 2009 Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)	Are you trying to get the effect thats shown in the attached image? If so you can do that by using a float. Attached Thumbnails

03-03-2012, 07:17 AM	#6
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	Well, thats quire simple, but even with margin and padding set to zero its not really good, how can i raise the 1 a little bit without breaking everything when the user selected a different font size? i just added border: 1px solid black to exactly see the box. Of course i can adjust the 1 with trial and error, but is there a proper way of aligning the paragraph and the heading vertical? Last edited by huebi; 03-03-2012 at 02:04 PM.

03-03-2012, 11:55 AM	#7
Keroberos Zealot Posts: 128 Karma: 238654 Join Date: Aug 2009 Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)	Were you wanting it to look like this? You can do that with negative margins. Here's the CSS that I used for <h2>, Code: h2 { float:left; font-size:3em; margin:-.3em 0 -.25em 0;} You can play with the margin values to get the position exactly where you want it. Attached Thumbnails Last edited by Keroberos; 03-03-2012 at 12:01 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Css Drop Caps does not work in an Epub on a Reader	brewt	ePub	63	09-07-2012 12:46 AM
The opposite of drop caps	LostSock	ePub	13	09-13-2011 07:07 AM
small caps	yuxi_kelly	ePub	20	06-05-2011 12:04 AM
newbiq Q about Drop Caps and Calibre	NASCARaddicted	Calibre	2	01-14-2010 07:03 PM
css drop caps coming out of calibre	brewt	Calibre	3	01-18-2009 04:00 PM

03-02-2012, 04:03 PM	#2
DiapDealer Grand Sorcerer Posts: 27,547 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	I don't understand. Dropped in relation to what? The chapter title? Do you have an example of what kind of thing you're looking for?

03-03-2012, 03:11 AM	#4
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	The example shown by Kerberos is exactly what i want - and the 12 should be a <h2> heading.

03-03-2012, 03:59 AM	#5
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	h2 { float: left; } should suffice.