View Full Version : iBooks Text background color that is limited to font height?


FunkeXMix
12-13-2012, 02:37 PM
Hi all!

I am trying to achieve this effect (check attachment test page 1) while conforming to iBooks requirements.

HTML

<div class="tocboxcolor">

<h1 class="toc">Contents</h1>

</div>


CSS

.tocboxcolor

{background-color: #000000; }


But this adds extra default padding inside the div for the colored background (as shown in test page 2).

Anybody know how to limit it so it is same or almost same as text height?



I have been spamming the board with questions lately but I do check if there are answers already, didn't find any regarding this.

Thank you all for the help once again!

FunkeXMix
12-14-2012, 11:13 AM
line-height: 0.75em;

Reducing the line height works quite well.

Jellby
12-14-2012, 01:27 PM
That's probably because the "padding" you see is not actually padding, but some space that could be taken by other characters in the font (like a "(", or "g", or "╔"). The vertical size of your black box is determined by the font size and line height. The actual size of the letters, in relation to the box height, is determined by the font itself, and you have (almost) no control over that.

Try writing "═NDICE" instead of "CONTENTS" and your line-height trick won't work so well. Worse still, try with different fonts and you'll probably find out each font requires a different line-height. And, since you can't control the font that will be used (not even if you embed it), you better not try to be very accurate.