Creating paragraphs you want to highlight with colored backgrounds are rendered using the <div> tag with border and background color attributes.
By default, text is displayed as black in ebooks. If the background color is dark, consider changing the text to white (color:white) in order for the text to be viewable.
TIP:
Always proof your work in actual devices before publishing.
Creating HTML Text Boxes for eBooks
NOTE:
The <font> tag is depreciated and not supported in HTML 5.
Use CSS instead.
Inline HTML
<div style="border: 1px solid black; background-color:#CC0066; padding-left:0.5em;"><font color="white">Important information to be displayed as white text in a colored box or frame with a solid black border.</font></div>
==or==
HTML
<div class="frame">Important information to be displayed as white text in a colored box or frame with a solid black border.</div>
CSS
div.frame {
border:1px solid black;
background-color:#CC0066;
color:white;
padding-left:0.5em;
padding-right:0.5em;
}
Will display as:
Here’s a screenshot of how it looks on the Kindle Fire
How it looks on the e-ink Kindle 3 (monochrome)
Download Files
Helpful Resources:
HTML Color Picker: Use the exact color for your background colors. Note that ebooks can display with white, sepia and black backgrounds, so choose a contrasting background color that will work will all three.
HTML Reference (HTML 5 Compatible): Alphabetical list of HTML 5 tags from W3Schools.com
Thank you, Unruly Guides! This is the precise data i planned to spend some hours researching for a book I’m formatting. So generous of you to make it available in this cut-and-paste fashion with a very clear example. And then…. the tips and helpful references… I’ll be applying this today. Carolyn Berger
Carolyn, as always you are welcome. Hope you had a wonderful holiday! — Suzanne
The above html and css will work fine for epub, but not mobi files for kindle
Ryan, Above is a screenshot of my Kindle Fire and Kindle 3 to show borders and backgrounds do display on Kindle devices. However, background colors, should be used with caution. If the user is viewing your book on a monochrome devices, such as the older e-inks or the newer Kindle Paperwhite, the resulting “color” is displayed as gray-scale and may make text difficult to read. — Suz
Hi Suz,
I am unable to replicate with a .mobi file. The above works for me as an .epub file on epub readers. If I download a .epub reader app for my kindle it will show correctly. Is the file your viewing above a .mobi file?
Would really like to replicate to see what I am doing wrong, please reply.
Thank you,
Ryan
I was able to replicate the above by using Mobipocket creator. If I use Sigil for epub then Calibre to convert to mobi the border gets stripped. Suz – did you use Mobipocket creator to create the .prc/.mobi file?
I am on a Mac so do not use Mobipocket creator. And never use Calibre either. My recommendation is to use Sigil for the epub and then either
1) convert the file to a MOBI file using Kindle Previewer (just drag and drop the epub file) or you can use KindleGen and do it yourself. However, Kindle Previewer uses “KindleGen” so you doing it is moot.
2) Upload the epub to KDP directly since they accept and will convert the file to mobi. But I like to convert to a mobi and test on my own devices before I publish to make sure it is working.
Hope this helps,
Suz
Thank you for the quick reply Suzanne. The first option above worked well for me. I was unaware of the option of opening an epub in Kindle Previewer to do the conversion. All across the web I see Sigil to Calibre as the recommended option for conversion. It seems Calibre was the culprit in this case and was unable to parse some aspect of the .epub file causing the border not display. Learned something new! Thanks!
I cringe every time I see Calibre recommendations for publishing. It is great for personal use, but for publishing, no. Glad you were able to get it straightened out.
Sadly, neither the inline html nor the CSS versions of this work in older eInk Kindles: the K1, K2, or DX.
It’s trivially easy to get the same effect using a 1-cell table, and that does work on older Kindles, but the Kindle formatting guidelines emphatically say to “use tables for tabular data only,” and not for formatting purposes of any kind. I wonder if bending that rule would be enough to get a book rejected by Amazon?
Actually, it does work on the Kindle 3 e-ink device (see screenshot above). Authors today need to format for today’s devices, and while many people may own the older Kindle 1,2, they are, as you put it – “OLD”. Technology advances quickly and people shed their old devices for new (or old phones for new) to enable the use of more advanced reading, games and the like (ie / fixed layout books, and Angry Birds).
But as stated, backgrounds do work on the Kindle 3, which is e-ink technology.
As for tables, they may seem easier, but I find that using with CSS is a lot faster easier and more precise.
I know it works on a Kindle 3; that’s why I didn’t say that it didn’t. :-)
At what point one abandons older technology is, of course, a judgement call. Personally I’m happy to throw the Kindle 1 under the bus, mainly because I think it was such an incredibly ugly and ill-conceived device that it’s hard for me to imagine any one still hanging onto theirs. But the K2 is a sweet and perfectly functional piece of hardware, and I’ll bet quite a few of them are still in use. And as for the Kindle DX, it’s still being sold by Amazon (presumably that’s why it remains as one of the options in Kindle Previewer), so technically it’s still one of “today’s devices.”
BTW, one way you can snazzy up a div.frame is to add a rounded corners to the CSS, as in:
border-radius: 5px;
Support for two media types enables content creators to use specific CSS based on the Mobi or KF8 file format: amzn-mobi and amzn-kf8; however e-ink devices may not recognize the @media type either (I cannot say as I do not own a Kindle 1 or 2. However, using the @media amzn-mobi and/or @media amzn-kf8 , you can adjust your CSS so that elements that will not display on older e-in devices will not appear odd or wrong. I use @media extensively when formatting for older and newer devices as well as different manufacturers (Nook, Ipad, etc)
Honestly, I do not recommend adding design styles 9such as backgrounds) unless it “adds” to the books meaning — if it is just fluff, then leave it out ;)
Hi! Thank you so much for giving me hope that my own div tags and CSS sheet will work. I got my html page to work in chrome, safari and firefox, but the kindle previewer strips out all of the format I worked so hard on. I tried Sigil as you suggested above, but I don’t understand it. It loaded my files great, and I saved as an epub. Unfortunately, the previewer will not even open the file. Do you have any clues what I missed?
Thank you!
Tina, the Kindle previewer should take the epub file (and convert it to a mobi for you) unless there are (errors) elements missing such as the table of contents and cover. first, be sure to use the Sigil flightcrew check (the green “check” icon”. Then go to Epubcheck Validator online here: http://validator.idpf.org/. The Flightcrew checker is good but misses any improper CSS formatting so it’s always good to do one final check with Epubcheck. Let me know — Suzanne