Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 12-13-2012, 01:37 PM   #1
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 39
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
Click image for larger version

Name:	test_Page_001.png
Views:	24
Size:	4.4 KB
ID:	97646   Click image for larger version

Name:	test_Page_002.png
Views:	23
Size:	3.1 KB
ID:	97647  
FunkeXMix is offline   Reply With Quote
Old 12-14-2012, 10:13 AM   #2
FunkeXMix
Enthusiast
FunkeXMix began at the beginning.
 
Posts: 39
Karma: 10
Join Date: Aug 2011
Device: Ipad
Code:
line-height: 0.75em;
Reducing the line height works quite well.
FunkeXMix is offline   Reply With Quote
 
Enthusiast
Old 12-14-2012, 12:27 PM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,105
Karma: 4791309
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.
Jellby is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 03:05 PM.


MobileRead.com is a privately owned, operated and funded community.