Question: Centered Heading With Line Through Middle

[Tex2002ans]

I was wondering if anyone has stumbled upon a way to do these headings in EPUB (Highlighted in orange):



The current EPUB uses images. (HIDEOUS solution, and does not scale at all):



I found this, which would work on websites:

http://www.impressivewebs.com/center...rizontal-line/

I found some similar discussion on the forums here for a line which is below by using a bottom-border (and code for line that fills all the way to the right edge):

https://www.mobileread.com/forums/sho...d.php?t=215338

Seems like a lot of these use CSS3, or code that breaks in ADE.

(This was going to be my simple solution) Just use a few em dashes to the left/right:

<h2>——— I ———</h2>
<h2>——— II ———</h2>
[...]
<h2>——— XIII ———</h2>

[HarryT]

Could use a single-cell table with visible borders. I'd be wary of using paragraph borders, because that won't work with the old "Mobi" format on the Kindle, and most authors sell a lot more Kindle than ePub books.

[Tex2002ans]

Originally Posted by HarryT

Could use a single-cell table with visible borders.

I went back and edited my first post clarifying the exact position I meant by highlighting.

Not too sure how you would accomplish that with a single cell. (Perhaps you were talking about the "CHAPTER IV", and yes, that was handled with top/bottom borders via CSS, and I can see that being accomplished also with a table cell).

Originally Posted by HarryT

I'd be wary of using paragraph borders, because that won't work with the old "Mobi" format on the Kindle, and most authors sell a lot more Kindle than ePub books.

Indeed. Typically I chop out a lot of this fluff (this particular case is me just cleaning up a previously converted EPUB, removing unnecessary fonts, images of tables -> actual HTML tables, images of greek text -> digital text, etc. etc.).

In this case, it doesn't really matter if this fluff in the EPUB doesn't appear in the old MOBI version, as long as it just degrades gracefully and works fine in ADE.

The simple em dashes on either side would work just fine for my purposes (anything would be better than those images! )... but I was just wondering if anyone had any other input/thoughts/code.

Only downside I can see of the em dash method is one in which Jellby answered in one the topic linked above:

Originally Posted by Jellby

[...] you cannot be sure that the dashes will form a continuous line in every font.

[RbnJrg]

Originally Posted by Tex2002ans

I was wondering if anyone has stumbled upon a way to do these headings in EPUB (Highlighted in

Hi Tex;

You can achieve that effect with the following code:

1. In your .css stylesheet, write:

h2 {
   text-align: center;
   margin: 1em 0 1em 0;
   font-size: 1.4em;
   border-top: 3px solid black;
   height: 0.5em;
}

.text {
   float: left;
   width: 5%; /* feel free to change the width */
   margin: -0.5em 47.5% 0 47.5%; /* if you change the width, then you must change the left and right margin */
   background: white !important;
}

p {
   text-align: justify;
   text-indent: 0em;
}

2. In your .html file write:

<h2><span class="text">I</span></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc...</p>

Here you can see how it looks in ADE:



Below I attach the respective .epub

Regards
Rubén

[GrannyGrump]

@RbnJrg -- but won't that look odd if the user does not have Black Text on a White Background?

O, I wish CSS could use variables, life would be so much easier!

@Tex -- if you want to go through the hassle of an embedded font, freeware Type Light [http://www.cr8software.net/typelight.html -- it says "open type font editor", but also works with true type] is fairly simple to use to edit/replace glyphs. You could make the emdash longer, and embed that subsetted font. Just a thought.

[gbm]

Originally Posted by RbnJrg

Hi Tex;

You can achieve that effect with the following code:

1. In your .css stylesheet, write:

h2 {
   text-align: center;
   margin: 1em 0 1em 0;
   font-size: 1.4em;
   border-top: 3px solid black;
   height: 0.5em;
}

.text {
   float: left;
   width: 5%; /* feel free to change the width */
   margin: -0.5em 47.5% 0 47.5%; /* if you change the width, then you must change the left and right margin */
   background: white !important;
}

p {
   text-align: justify;
   text-indent: 0em;
}

2. In your .html file write:

<h2><span class="text">I</span></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc...</p>

Here you can see how it looks in ADE:

Attachment 118989

Below I attach the respective .epub

Regards
Rubén

Remember that the Nook does not like condensed margins
Please see this thread, Post #13-#21. Nook does not like condensed margins when not using publisher defaults.

I will bookmark this post.

bernie

[Tex2002ans]

Originally Posted by RbnJrg

You can achieve that effect with the following code:

Of course! Right when I saw negative margins in your post, the same type of solution clicked for me (I hate it when that happens).

Thanks for the fantastic example.

I only did a few minor tweaks to your CSS:

• Uncondensed margins.
• Made the width 25% (adjusted margins to fit)
  • 5% was a little too thin when I used "VIII"
• Removed specifying "black" from the border-top
  • This should allow the line to match the user specified font color
  • Tested it by changing the font color in Calibre, looked like the line color changed right along with it

h2 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    border-top: 3px solid;
    height: 0.5em;
}

.text {
    float: left;
    width: 25%;
    margin-top: -.5em;
    margin-bottom: 0;
    margin-left: 37.5%;
    margin-right: 37.5%;
    background: white !important;
}

p {
    text-align: justify;
    text-indent: 0em;
}

(See attached EPUB)

In ADE:



Tested it in Calibre, you get this oddity (border appears at the very top, and not through the middle):

Originally Posted by RbnJrg

Here you can see how it looks in ADE:

JPG?!?!?!?! You disappoint me! Have I taught you nothing about the superiority of PNG for artificial images?!!?!?

Originally Posted by GrannyGrump

@RbnJrg -- but won't that look odd if the user does not have Black Text on a White Background?

Indeed... doesn't seem like there would be a perfect solution, but this is a fantastic step in the right direction.

Definitely much further than where I was previously!

Originally Posted by GrannyGrump

@Tex -- if you want to go through the hassle of an embedded font, freeware Type Light [http://www.cr8software.net/typelight.html -- it says "open type font editor", but also works with true type] is fairly simple to use to edit/replace glyphs. You could make the emdash longer, and embed that subsetted font. Just a thought.

Thanks for the info. I personally tend to just err on the side of never getting in the way of user font choices, so I try to avoid embedding any fonts.

I will put this one in my pocket and take a look though.

Originally Posted by gbm

Remember that the Nook does not like condensed margins
Please see this thread, Post #13-#21. Nook does not like condensed margins when not using publisher defaults.

Thanks for pointing this out. Good to let others learn about oddities in certain readers.

I always use the uncondensed version anyway, seems much easier to understand/read (especially if others open the book and want to quickly tweak something).

[GrannyGrump]

@Tex -- hey, I think the Calibre "oddity" is not bad. The user would likely think it is a deliberate design choice.

[RbnJrg]

Originally Posted by GrannyGrump

@RbnJrg -- but won't that look odd if the user does not have Black Text on a White Background?

Hi Granny;

Well, it seems that if we set the line color to some kind of grey, all is solved. See this picture:



I reached that solution by using:

h2 {
   text-align: center;
   margin: 1em 0 1em 0;
   font-size: 1.4em;
   border-top: 3px solid #999;
   height: 0.5em;
}

Also it looks good in normal mode (black text on a white background).

Regards
Rubén

EDIT: "border-top: 3px solid;" -as Tex used- works even better -in night mode- than "border-top: 3px solid #999;"

[RbnJrg]

Originally Posted by Tex2002ans

Of course! Right when I saw negative margins in your post, the same type of solution clicked for me (I hate it when that happens).

Thanks for the fantastic example.

You are welcome!

I only did a few minor tweaks to your CSS:

• Uncondensed margins.
• Made the width 25% (adjusted margins to fit)
  • 5% was a little too thin when I used "VIII"
• Removed specifying "black" from the border-top
  • This should allow the line to match the user specified font color
  • Tested it by changing the font color in Calibre, looked like the line color changed right along with it

Well done, but I would set the border-top color to #999 so the solution also can work in night mode. See my previous post.

JPG?!?!?!?! You disappoint me! Have I taught you nothing about the superiority of PNG for artificial images?!!?!?

JPG is for pictures attached in my posts In ebooks I use .png images (or .svg when it matters )

Indeed... doesn't seem like there would be a perfect solution, but this is a fantastic step in the right direction.

Now, with a border-top color of #999 (or another shade of gray) is almost perfect

Regards
Rubén

[RbnJrg]

Originally Posted by gbm

Remember that the Nook does not like condensed margins
Please see this thread, Post #13-#21. Nook does not like condensed margins when not using publisher defaults.

I will bookmark this post.

bernie

You are welcome Bernie and I will take note about not using the shorthand form for margins

[Tex2002ans]

Originally Posted by RbnJrg

JPG is for pictures attached in my posts In ebooks I use .png images (or .svg when it matters )

I found your favorite site:

http://needsmorejpeg.com/



(You should upgrade to PNG in your posts as well, that last one had such bad haloing artifacts.)

Hmmm.. now am I just going crazy? My Kindle Previewer shows the line up top and not centered as it does in yours:

[RbnJrg]

Originally Posted by Tex2002ans

I found your favorite site:

http://needsmorejpeg.com/



(You should upgrade to PNG in your posts as well, that last one had such bad haloing artifacts.)

Really? You are a perfeccionist, Tex I think that .jpg is ok in posts like this one.

Hmmm.. now am I just going crazy? My Kindle Previewer shows the line up top and not centered as it does in yours:

Maybe someone with a Kindle Fire can post a screenshot of his\her device and then we'll have a definitive answer. By the way, your aproximation works better in night mode:

border-top: 3px solid;

looks great in Kindle Previewer.

[RbnJrg]

I think I found the final solution with the following css code:

h2 {
   height: 2em;
   border-bottom: 3px solid;
   margin-top: -1em;
   margin-bottom: 1em;
   font-size: 1.4em;
   text-align: center;
}

.text {
   float: left;
   width: 20%;
   line-height: 2.8em;
   font-size: 1.4em;
   margin-left: 40%;
   margin-right: 40%; 
   background: white !important;
}

p {
   text-align: justify;
   text-indent: 0em;
}

This is the look in Calibre Viewer:



And this is the look in Kindle Previewer (Kindle Fire - Night Mode):



Below I attach the respective epub.

Regards
Rubén

[Jellby]

Not very nice in my browser, if you ask me.