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

Code:

<hr class="sep" />

and this in my stylesheet:

Code:

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

Quote:

Originally Posted by orange!

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:

Code:

<hr class="sep" />

and this in my stylesheet:

Code:

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:

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

Quote:

Originally Posted by RbnJrg

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

orange! · 06-29-2013, 02:45 PM

Quote:

Originally Posted by PeterT

You might like to look at this thread for other ideas Dividers and fleurons

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

Jellby · 06-29-2013, 02:56 PM

Quote:

Originally Posted by orange!

This isn't really a Sigil question--if there's a better place to ask generic CSS questions, please let me know.

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

Quote:

Code:

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 or this for some ideas.

I have used something like

Code:

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

and

Code:

<hr class="hr90" />

for a quick and dirty, but nicely centred separator.

orange! · 07-02-2013, 06:13 PM

Quote:

Originally Posted by Jellby

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.

Quote:

Originally Posted by DomesticExtremis

You might want to look at this or this for some ideas.
...

DomesticExtremis, thanks for the ideas!

Notjohn · 07-04-2013, 06:01 PM

Quote:

Originally Posted by DomesticExtremis

color: #404040;

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

DomesticExtremis · 07-04-2013, 09:17 PM

Quote:

Originally Posted by Notjohn

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 has some greyscales and test images.
Mine only seems to display eight discernible levels of grey.

DaleDe · 07-05-2013, 05:53 PM

Quote:

Originally Posted by Notjohn

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

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:

Code:

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:

Code:

<hr class="line" />

or

Code:

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

06-29-2013, 01:48 PM	#1
orange! Born to be wild Posts: 206 Karma: 1010067 Join Date: Sep 2010 Location: North Carolina, USA Device: Kindle K3 wi-fi, Nexus 7 + Aldiko	<hr> as section separator? 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: Code: <hr class="sep" /> and this in my stylesheet: Code: 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!

06-29-2013, 09:18 PM	#7
DomesticExtremis Addict Posts: 243 Karma: 359054 Join Date: Nov 2012 Device: default	You might want to look at this or this for some ideas. I have used something like Code: .hr90{ color: #404040; margin-left: 5%; margin-right: 5%; } and Code: <hr class="hr90" /> for a quick and dirty, but nicely centred separator. Last edited by DomesticExtremis; 06-29-2013 at 09:29 PM.

09-17-2013, 02:24 PM	#13
meson1 Member Posts: 23 Karma: 333824 Join Date: Aug 2013 Location: UK Device: Espresso Kobo Aura HD	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: Code: 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: Code: <hr class="line" /> or Code: <hr class="dashes" />

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Subgroup Separator	ilovejedd	Library Management	8	03-03-2012 11:55 AM
Use of comma as field separator and author_sort	meme	Development	9	04-19-2011 05:26 PM
Welcome to the Cool-er section!	sassanik	Interead COOL-ER	9	02-17-2011 02:24 PM
What do you think I would ask for in this section?	Saras	Which one should I buy?	4	01-20-2011 04:15 PM

06-29-2013, 02:19 PM	#4
PeterT Grand Sorcerer Posts: 12,754 Karma: 75000002 Join Date: Nov 2007 Location: Toronto Device: Libra H2O, Libra Colour	You might like to look at this thread for other ideas Dividers and fleurons

09-16-2013, 01:25 AM	#12
DomesticExtremis Addict Posts: 243 Karma: 359054 Join Date: Nov 2012 Device: default	Well, I have been playing around myself with styling <hr> tags in ePubs and decided to add a section to my EPUB Feature Peeker

09-17-2013, 04:31 PM	#14
DomesticExtremis Addict Posts: 243 Karma: 359054 Join Date: Nov 2012 Device: default	For a 'plain' hr you need to set the background-color property - it defaults to transparent.

Advert

Advert