View Full Version : <hr> as section separator?


orange!
06-29-2013, 01:48 PM
This isn't really a Sigil question--if there's a better place to ask generic CSS questions, please let me know.

The book I'm working on uses a short horizontal line to separate sections within a chapter. So my inclination was to use this in my html:

<hr class="sep" />

and this in my stylesheet:


hr.sep
{
width: 72px;
text-align: center;
}


Looks fine in Book Preview, but on the device, the <hr> is left-aligned.

My question: is there an industry-standard way to render a section separator like this?

Thanks in advance!

RbnJrg
06-29-2013, 01:57 PM
This isn't really a Sigil question--if there's a better place to ask generic CSS questions, please let me know.

The book I'm working on uses a short horizontal line to separate sections within a chapter. So my inclination was to use this in my html:

<hr class="sep" />

and this in my stylesheet:


hr.sep
{
width: 72px;
text-align: center;
}


Looks fine in Book Preview, but on the device, the <hr> is left-aligned.

My question: is there an industry-standard way to render a section separator like this?

Thanks in advance!

In devices based on ADE, the text-align property doesn't work for the <hr> tag. So, you must use a workaround to center the rule. First, work with percentages to fix the rule width (72px is about 12% of the device width); knowing that and that you want to center the rule, you need to establish a left margin of (100% - 12%) / 2 = 44%. Of that way, in your css stylesheet you should use the following code:


hr.sep
{
width: 12%;
margin-left: 44%;
}


After that you should have your rule centered in your device :)

Regards
Rubén

orange!
06-29-2013, 02:03 PM
...
After that you should have your rule centered in your device :)

Regards
Rubén

Yes, that worked--thanks!!

PeterT
06-29-2013, 02:19 PM
You might like to look at this thread for other ideas Dividers and fleurons (http://www.mobileread.com/forums/showthread.php?t=216216)

orange!
06-29-2013, 02:45 PM
You might like to look at this thread for other ideas Dividers and fleurons (http://www.mobileread.com/forums/showthread.php?t=216216)

Excellent--thanks! Plus I learned a new word "fleuron"!

Jellby
06-29-2013, 02:56 PM
This isn't really a Sigil question--if there's a better place to ask generic CSS questions, please let me know.

Moved to the ePub section. Could also be in Workshop, but since you are using Sigil, I guess you are creating an ePub.


hr.sep
{
width: 72px;
text-align: center;
}


Looks fine in Book Preview, but on the device, the <hr> is left-aligned.

In fact, it isn't. You just have to understand what is happening here:

1. The <hr> element is just a block element (like <p> or <div>) with a default border, that we see as a "rule".

2. The "text-align" property does not control the position of an element itself, but rather of its content. Since <hr> has no content, there's no use in specifying text-align.

And of course, when you force the width of a block element (like <hr>) to less than 100%, it will typically stay at the left. You could think of specifying "text-aling:center" in the container element (probably <body>), but I'm afraid that will only affect inline elements, not block ones. Or you try with "margin:0 auto", which should ensure that left and right margins in <hr> are equal (thus centering the element), unfortunatelly Adobe-based readers chose to interpret the "auto" value as "0", which is allowed by the spec. The Book view uses a different renderer that obeys auto margins, and probably has that value as default.

So, the solution is as Rubén said, specify at least margin-left. Why 44%, just because you set 12% width, and (100-12)/2 = 44.

DomesticExtremis
06-29-2013, 09:18 PM
You might want to look at this (http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm) or this (http://www.techrepublic.com/blog/webmaster/customize-horizontal-rules-to-add-some-flair/1691) for some ideas.

I have used something like

.hr90{
color: #404040;
margin-left: 5%;
margin-right: 5%;
}


and

<hr class="hr90" />


for a quick and dirty, but nicely centred separator.

orange!
07-02-2013, 06:13 PM
Moved to the ePub section. Could also be in Workshop, but since you are using Sigil, I guess you are creating an ePub.
...


Jellby, thanks for moving me to the right place and for the explanation about text-align.

You might want to look at this (http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm) or this (http://www.techrepublic.com/blog/webmaster/customize-horizontal-rules-to-add-some-flair/1691) for some ideas.
...


DomesticExtremis, thanks for the ideas!

Notjohn
07-04-2013, 06:01 PM
color: #404040;

Does the color gray actually render as such on e-readers?

DomesticExtremis
07-04-2013, 09:17 PM
Does the color gray actually render as such on e-readers?

It does on my Kobo Mini - I can't speak for other e-readers.
The following ePub (http://www.mobileread.com/forums/showthread.php?p=2487756#post2487756) has some greyscales and test images.
Mine only seems to display eight discernible levels of grey.

DaleDe
07-05-2013, 05:53 PM
Does the color gray actually render as such on e-readers?

It will render but not necessarily distinguish between nearby gray values. Read out wiki article on Grayscale to understand the exact values used on various readers.

Dale

DomesticExtremis
09-16-2013, 01:25 AM
Well, I have been playing around myself with styling <hr> tags in ePubs and decided to add a section to my EPUB Feature Peeker (http://www.mobileread.com/forums/showthread.php?t=211123)

meson1
09-17-2013, 02:24 PM
I needed to mark up a book with two different types of separator. One a solid line and the other a dashed line, both in the centre of the page. A regular <hr/> accompanied with identical left and right margins to center it worked fine.

But once I started trying to show two different styles I struggled to get my Kobo Aura HD to render <hr/> separators properly. They displayed fine in Sigil and fine in Calibre. But the Kobo was showing them in a barely visible grey colour until I came up with the following:

hr.line {
border-color: black;
border-top: medium solid black;
border-left: none;
border-right: none;
border-bottom: none;
height:0px;
margin-bottom: 2em;
margin-left: 42%;
margin-right: 42%;
margin-top: 2em;
}
hr.dashes {
border-color: black;
border-top: medium dashed black;
border-left: none;
border-right: none;
border-bottom: none;
height:0px;
margin-bottom: 2em;
margin-left: 42%;
margin-right: 42%;
margin-top: 2em;
}

And the html:
<hr class="line" />
or
<hr class="dashes" />

DomesticExtremis
09-17-2013, 04:31 PM
For a 'plain' hr you need to set the background-color
property - it defaults to transparent.