![]() |
#1 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,170
Karma: 4949904
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Stacked boxes
The book I am currently reading has a decorative chapter heading as shown in the image. But the book creator simply scanned the chapter heading from the paper book and inserted the image into the book. There are 132 images. Also, when using a dark or sepia theme in the ebook, the white background in the jpg file is visible.
I created a CSS/HTML version of the same heading. But I think it is a bit messy and complex. Is there a neater way to do this? My CSS code... Spoiler:
My HTML code... Spoiler:
|
![]() |
![]() |
![]() |
#2 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() |
|
![]() |
![]() |
Advert | |
|
![]() |
#3 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
1. In your .xhtml sheet, write this: Code:
<div class="center"> <p class="greyBox">99</p> </div> <h1 class="👻">C* H* A* P* T* E* R</h1> <h2>ZOE ALAKIS</h2> Code:
h1 { text-align: center; color: white; background: black; font-family: sans-serif; font-size: 1.1em; margin: -7em 0 0; } h2 { text-align: center; font-size: 1.4em; margin: 0; } .center { position: relative; z-index: -1; height: 8.4em; text-align: center; } .greyBox { display: inline-block; width: 2.4em; height: 100%; line-height: 2.4em; margin-top: 0; color: white; background: #999; font-size: 3.5em; font-weight: bold; font-family: sans-serif; text-align: center; } .👻 { /* Don't change the name of this class */ margin-bottom: 5.6em; /* 7 - 1.4 = 5.6 */ } Don't change the name of the class ".👻" (it's a hack for ADE 2). Epubcheck will give you an error message but don't pay attention. Here you can watch how it looks under ADE and webkit: Below you can check the respective epub. Regards. Last edited by RbnJrg; 11-12-2021 at 11:20 AM. |
|
![]() |
![]() |
![]() |
#4 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,170
Karma: 4949904
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Hello @RbnJrg
Good call, I am using epub v2 Yes, that is much simpler. It took me a few minutes to pull it apart to see how it works, but I still don't understand the <h1 class="👻">. Why is it a h1 and not a <p> (as the auto TOC generator will capture the <h1>) and why a ghost emoji? Thank you for the solution!! ![]() |
![]() |
![]() |
![]() |
#5 | |||
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
By the way, your solution uses the property "margin: auto" and that is not supported by ADE for epub2 (is ok for webkit) and —still today— there are many ereaders based on Legacy ADE (RMSDK). Quote:
![]() |
|||
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,170
Karma: 4949904
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Quote:
![]() |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Problem resizing boxes | giotti | KOReader | 5 | 11-05-2020 05:00 AM |
Boxes instead of quotation marks | testingfaze | Conversion | 2 | 12-03-2013 03:07 AM |
just get black boxes | jmugan | Conversion | 2 | 12-27-2011 10:13 AM |
Boxes and boxes of books | Elsi | Lounge | 14 | 07-22-2008 08:04 PM |