[JustinThought]

Good morning, all. In my constant endeavor to take the "boring" out of e-book formats, I've been working on a couple of things. Now that I have them working (sort of), I thought I'd come here to get any feedback on what I've kludged together.

The first thing I've been working on is an attempt to have the second line of each chapter heading to have completely different formats. Specifically, I would like the first element to be left-aligned, and the second element to be right-aligned. After poring through suggestions all over the internet on how to accomplish this, the first image below shows the result of my labors.

This has been accomplished by placing the following code into the stylesheet:

  <h3 class="chapter" title="Chapter 1. Chaptername">A Weather Report<br/></h3>

  <div style="line-height: 1.4em;color: white;background-color: green;">
  <span class="alignleft">
    A Trite Beginning</span>
  <span class="alignright">Chapter 1</span>
  </div>
  <div style="clear: both;"></div>

The only leading-edge aspect of the above are the alignleft and alignright classes. Here's what they look like in the stylesheet:

.alignleft {
    background-color: green;
    text-align: left;
    float: left;
    width: 75%;
}

.alignright {
    background-color: green;
    text-align: right;
    float: right;
    width: 25%;
}

This works fine in Calibre, Adobe Digital Editions, and Gitden Reader for Android. (These are my normal bellwethers for testing unique formats.) Of course, it doesn't work in Moon+ Reader, but then again, almost nothing does anyway.

The second thing I've been working on is to have the first line of each chapter to display a dropped cap, and use an external font for display of the rest of the text on that line. Based on a suggestion I found in this forum (sorry, I didn't note the author: kudos to that unsung hero), the second graphic shows the result. The only thing special in the e-book to cause this is to place the "chapter" class into the header line. But the coding in the stylesheet is a little more intricate, as shown below:

h3.chapter {
    text-indent: 0;
    text-align: center;
    font-size: 1em;
    background-color: brown;
    font-weight: bold;
    margin-bottom: 0em;
    margin-top: .5em;
}

h3.chapter+div+div+p {
    text-indent: 0em;
    margin-top: 0em;
}

h3.chapter+div+div+p::first-letter {
    font-family: chaptername3;
    color: white;
    background-color: purple;
    font-size: 3.75em;
    padding-right: 0.1em;
    padding-left: 0.1em;
    float: left;
    margin-bottom: -0.10em;
    margin-top: 0em;
}

h3.chapter+div+div+p::first-line {
    font-family: "chaptername2";
    text-transform: uppercase;
    font-size: 1.4em;
}

Interestingly enough, while this works in Calibre and Gitden Reader, Adobe Digital Editions refuses to show it properly, as you can see in the second graphic.

For anyone interested, I am including the e-book with the coding. Don't worry about copyright issues; this text is my own, created as an exercise designed to raise the "urp" factor in a sophisticated reader (and I think I've accomplished my goal there as well).

Anybody want to give me any suggestions, ideas, or flames about all this? I'm interested to know if anyone knows of a more elegant solution to the split chapter headers; as well as if anyone has gotten the first letter/first line display to work properly in ADE, as shown in the third graphic.

note: to forestall any complaints about the "text-transform" function in the first-line, I left it in there so any readers that don't display external fonts could potentially still have something to play with. Of course, it doesn't have any affect on the fonts I'm using.