06-29-2013, 12:48 PM | #1 |
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" /> Code:
hr.sep { width: 72px; text-align: center; } My question: is there an industry-standard way to render a section separator like this? Thanks in advance! |
06-29-2013, 12:57 PM | #2 | |
Wizard
Posts: 1,605
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
hr.sep { width: 12%; margin-left: 44%; } Regards Rubén |
|
Advert | |
|
06-29-2013, 01:03 PM | #3 |
Born to be wild
Posts: 206
Karma: 1010067
Join Date: Sep 2010
Location: North Carolina, USA
Device: Kindle K3 wi-fi, Nexus 7 + Aldiko
|
|
06-29-2013, 01:19 PM | #4 |
Grand Sorcerer
Posts: 12,649
Karma: 74500000
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
|
06-29-2013, 01:45 PM | #5 | |
Born to be wild
Posts: 206
Karma: 1010067
Join Date: Sep 2010
Location: North Carolina, USA
Device: Kindle K3 wi-fi, Nexus 7 + Aldiko
|
Quote:
|
|
Advert | |
|
06-29-2013, 01:56 PM | #6 | ||
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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:
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. |
||
06-29-2013, 08:18 PM | #7 |
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%; } Code:
<hr class="hr90" /> Last edited by DomesticExtremis; 06-29-2013 at 08:29 PM. |
07-02-2013, 05:13 PM | #8 | |
Born to be wild
Posts: 206
Karma: 1010067
Join Date: Sep 2010
Location: North Carolina, USA
Device: Kindle K3 wi-fi, Nexus 7 + Aldiko
|
Quote:
DomesticExtremis, thanks for the ideas! |
|
07-04-2013, 05:01 PM | #9 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
|
07-05-2013, 04:53 PM | #11 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
09-16-2013, 12:25 AM | #12 |
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, 01:24 PM | #13 |
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; } Code:
<hr class="line" /> Code:
<hr class="dashes" /> |
09-17-2013, 03:31 PM | #14 |
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. |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Subgroup Separator | ilovejedd | Library Management | 8 | 03-03-2012 10:55 AM |
Use of comma as field separator and author_sort | meme | Development | 9 | 04-19-2011 04:26 PM |
Welcome to the Cool-er section! | sassanik | Interead COOL-ER | 9 | 02-17-2011 01:24 PM |
What do you think I would ask for in this section? | Saras | Which one should I buy? | 4 | 01-20-2011 03:15 PM |