iBooks Text background color that is limited to font height?

FunkeXMix · 12-13-2012, 01:37 PM

Hi all!

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

Code:

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, 10:13 AM

Code:

line-height: 0.75em;

Reducing the line height works quite well.

Jellby · 12-14-2012, 12: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.

12-13-2012, 01:37 PM	#1
FunkeXMix Enthusiast Posts: 48 Karma: 10 Join Date: Aug 2011 Device: Ipad	iBooks Text background color that is limited to font height? Hi all! I am trying to achieve this effect (check attachment test page 1) while conforming to iBooks requirements. Code: 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! Attached Thumbnails

12-14-2012, 10:13 AM	#2
FunkeXMix Enthusiast Posts: 48 Karma: 10 Join Date: Aug 2011 Device: Ipad	Code: line-height: 0.75em; Reducing the line height works quite well.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page Background Color in iBooks.	FunkeXMix	ePub	5	12-19-2012 03:48 PM
Text color and background color almost the same	larrymohr	Kobo Tablets	2	11-20-2011 06:59 PM
font color and background	arslonga	ePub	1	08-23-2011 04:23 AM
Any epub reader for PC allows me to change text and background color?	ttluisa	General Discussions	5	05-11-2010 11:04 PM
Does HS support customizing background and font color?	Calvin998	Reading and Management	3	02-12-2004 04:36 PM

12-14-2012, 12:27 PM	#3
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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.