Stacked boxes

[Karellen]

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:

PHP Code:

.box1 {
  margin: auto;
  width: 130px;
  height: 100px;
  border: 1px solid gray;
  background-color: gray;
  box-sizing: border-box;
  text-align: center;
}
.box2 {
  margin: auto;
  width: 130px;
  height: 10px;
  border: 1px solid gray;
  background-color: gray;
  box-sizing: border-box;
  text-align: center;
}
.box3 {
  margin: auto;
  width: 420px;
  height: 20px;
  border: 1px solid black;
  background-color: black;
  box-sizing: border-box;
  text-align: center;
}
.chapterno {
  font-size: 3.0em;
  font-family: sans-serif;
  color: white;
  line-height: 0;
  margin-bottom: 25px;
  text-align: center;
}
.chapterword {
  font-weight: bold;
  font-size: .8em;
  font-family: sans-serif;
  color: white;
  line-height: 0;
  text-transform: uppercase;
  text-align: center;
} 


My HTML code...

Spoiler:

PHP Code:

  <p class="box2"></p>
  <p class="box3"><span class="chapterword">C&#8195;H A P T E R</span></p>
  <div class="box1">  
  <p class="chapterno">99</p>
  </div> 


[RbnJrg]

Originally Posted by Karellen

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:

PHP Code:

.box1 {
  margin: auto;
  width: 130px;
  height: 100px;
  border: 1px solid gray;
  background-color: gray;
  box-sizing: border-box;
  text-align: center;
}
.box2 {
  margin: auto;
  width: 130px;
  height: 10px;
  border: 1px solid gray;
  background-color: gray;
  box-sizing: border-box;
  text-align: center;
}
.box3 {
  margin: auto;
  width: 420px;
  height: 20px;
  border: 1px solid black;
  background-color: black;
  box-sizing: border-box;
  text-align: center;
}
.chapterno {
  font-size: 3.0em;
  font-family: sans-serif;
  color: white;
  line-height: 0;
  margin-bottom: 25px;
  text-align: center;
}
.chapterword {
  font-weight: bold;
  font-size: .8em;
  font-family: sans-serif;
  color: white;
  line-height: 0;
  text-transform: uppercase;
  text-align: center;
} 


My HTML code...

Spoiler:

PHP Code:

  <p class="box2"></p>
  <p class="box3"><span class="chapterword">C&#8195;H A P T E R</span></p>
  <div class="box1">  
  <p class="chapterno">99</p>
  </div> 


There are easier ways to do what you want But before giving you a "solution", I need to know if you are working on epub2 or epub3?

[RbnJrg]

Originally Posted by RbnJrg

There are easier ways to do what you want But before giving you a "solution", I need to know if you are working on epub2 or epub3?

Well, here you have a solution for epub2 (with epub3 the code is simpler yet). you can get the layout you are looking for with the following code:

1. In your .xhtml sheet, write this:

  <div class="center">
    <p class="greyBox">99</p>
  </div>

  <h1 class="👻">C* H* A* P* T* E* R</h1>

  <h2>ZOE ALAKIS</h2>

2. In your .css stylesheet write:

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 */
}

To center the chapter number vertically, use the property "line-height". Its value must be equal to the height of the square. And since I employed as height 8.4em and the font-size is 3.5em, then the line-height is 8.4/3.5=2.4.
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.

[Karellen]

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!!

[RbnJrg]

Originally Posted by Karellen

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="👻">.

Classes whose names are emojis, they are not detected by ADE 2. So the margin-bottom for <h1> is not taken by ADE but webkit it is. ADE doesn't need that margin but webkit does. For that reason I employed that class.

Why is it a h1 and not a <p> (as the auto TOC generator will capture the <h1>)?

You can exclude the <h1> tags for the TOC generator, that is not an issue. But if you feel that are more comfortable with a <p> tag instead of <h1>, no problem, is ok, use <p>.

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).

Thank you for the solution!!

No problem!

[Karellen]

Originally Posted by RbnJrg

Classes whose names are emojis, they are not detected by ADE 2. So the margin-bottom for <h1> is not taken by ADE but webkit it is. ADE doesn't need that margin but webkit does. For that reason I employed that class.

You can exclude the <h1> tags for the TOC generator, that is not an issue. But if you feel that are more comfortable with a <p> tag instead of <h1>, no problem, is ok, use <p>.

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).

No problem!

Thanks for the explanations