[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?