View Full Version : 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>,
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
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
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.