Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-29-2013, 12:48 PM   #1
orange!
Born to be wild
orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.
 
orange!'s Avatar
 
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!
orange! is offline   Reply With Quote
Old 06-29-2013, 12:57 PM   #2
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 441
Karma: 299858
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by orange! View Post
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
RbnJrg is offline   Reply With Quote
 
Enthusiast
Old 06-29-2013, 01:03 PM   #3
orange!
Born to be wild
orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.
 
orange!'s Avatar
 
Posts: 206
Karma: 1010067
Join Date: Sep 2010
Location: North Carolina, USA
Device: Kindle K3 wi-fi, Nexus 7 + Aldiko
Quote:
Originally Posted by RbnJrg View Post
...
After that you should have your rule centered in your device

Regards
Rubén
Yes, that worked--thanks!!
orange! is offline   Reply With Quote
Old 06-29-2013, 01:19 PM   #4
PeterT
Taking a break; Fed up
PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.
 
PeterT's Avatar
 
Posts: 6,534
Karma: 43528910
Join Date: Nov 2007
Location: Toronto
Device: Wife: Touch, Arc, Vox Me: Nexus 7, Glo
You might like to look at this thread for other ideas Dividers and fleurons
PeterT is offline   Reply With Quote
Old 06-29-2013, 01:45 PM   #5
orange!
Born to be wild
orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.
 
orange!'s Avatar
 
Posts: 206
Karma: 1010067
Join Date: Sep 2010
Location: North Carolina, USA
Device: Kindle K3 wi-fi, Nexus 7 + Aldiko
Quote:
Originally Posted by PeterT View Post
You might like to look at this thread for other ideas Dividers and fleurons
Excellent--thanks! Plus I learned a new word "fleuron"!
orange! is offline   Reply With Quote
Old 06-29-2013, 01:56 PM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,001
Karma: 4346921
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by orange! View Post
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.
Jellby is offline   Reply With Quote
Old 06-29-2013, 08:18 PM   #7
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 150
Karma: 319628
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 08:29 PM.
DomesticExtremis is offline   Reply With Quote
Old 07-02-2013, 05:13 PM   #8
orange!
Born to be wild
orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.orange! ought to be getting tired of karma fortunes by now.
 
orange!'s Avatar
 
Posts: 206
Karma: 1010067
Join Date: Sep 2010
Location: North Carolina, USA
Device: Kindle K3 wi-fi, Nexus 7 + Aldiko
Quote:
Originally Posted by Jellby View Post
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 View Post
You might want to look at this or this for some ideas.
...
DomesticExtremis, thanks for the ideas!
orange! is offline   Reply With Quote
Old 07-04-2013, 05:01 PM   #9
Notjohn
Addict
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 202
Karma: 246332
Join Date: Dec 2012
Device: Kindle
Quote:
Originally Posted by DomesticExtremis View Post
color: #404040;
Does the color gray actually render as such on e-readers?
Notjohn is offline   Reply With Quote
Old 07-04-2013, 08:17 PM   #10
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 150
Karma: 319628
Join Date: Nov 2012
Device: default
Quote:
Originally Posted by Notjohn View Post
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.
DomesticExtremis is offline   Reply With Quote
Old 07-05-2013, 04:53 PM   #11
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,510
Karma: 4597184
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Quote:
Originally Posted by Notjohn View Post
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
DaleDe is offline   Reply With Quote
Old 09-16-2013, 12:25 AM   #12
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 150
Karma: 319628
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
DomesticExtremis is offline   Reply With Quote
Old 09-17-2013, 01:24 PM   #13
meson1
Member
meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.meson1 ought to be getting tired of karma fortunes by now.
 
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" />
meson1 is offline   Reply With Quote
Old 09-17-2013, 03:31 PM   #14
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 150
Karma: 319628
Join Date: Nov 2012
Device: default
For a 'plain' hr you need to set the background-color
property - it defaults to transparent.
DomesticExtremis is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 08:33 PM.


MobileRead.com is a privately owned, operated and funded community.