06-07-2013, 04:16 PM | #1 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
HR alignment problems
Had coded in some lines into my HTML only to discover the attributes such as align and color for the hr have been depreciated. So I did some research and came up with this:
Code:
<hr style="text-align:center; border:3px solid #000000; width:70%" /> Code:
<hr style="margin-left:15%; border:3px solid #000000; width:70%" /> I need two lines of different widths, one above the other: Code:
<hr style="margin-left:15%; border:3px solid #000000; width:70%" /> <hr style="margin-left:15%; border:1px solid #000000; width:70%" /> I've tried fudging the width percentage, making the top line 69% and adjusting the margins, and other such nonsense, all in vain. The difference in width wouldn't be such an issue if they would align:center properly, but as I said ADE is not recognizing that. It also does not recognize float:center for the hr element. I have tried creating a div and imposing text-align:center on it, but while Sigil displays it properly, again ADE does not recognize it (I use ADE as a benchmark for what the book will look like in the worst ePub reader ever; if it looks okay in ADE, it'll be fine everywhere else, I figure). Any help greatly appreciated. Michelle P.S. I also read it is better to create the hr in CSS, but when I tried to create two different classes of hr for the different line heights, the results were worse. |
06-07-2013, 05:12 PM | #2 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Worked it out. By only specifying the left-margin indent, and lowering the top line width to 69.5%, the difference is barely legible to the naked eye. Will go with that.
Michelle |
06-07-2013, 05:33 PM | #3 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
hr { text-align: center; width: 70%; color: #000000; background-color: #000000; } .thick_line { height: 3px; } .thin_line { height: 1px; } Code:
<hr class="thick_line" /> <hr class="thin_line" /> Regards Rubén |
|
06-07-2013, 05:48 PM | #4 | |
Resident Curmudgeon
Posts: 73,957
Karma: 128903250
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
hr { margin-left: 15%; width: 70%; color: #000000; background-color: #000000; } |
|
06-07-2013, 05:58 PM | #5 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Thanks for these. Will do.
Michelle |
06-07-2013, 06:08 PM | #6 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
New issue:
The way I have it coded gives me two solid black lines. If I use the code suggested here, I get a beveled edge. See screen shot for comparison. There seems to be an inability of the reader to create a dark black border of only one pixel. I think what I might do here is give the client an option: the first way replicates his manuscript, the second is a bit fancier. Michelle |
06-07-2013, 06:55 PM | #7 |
Resident Curmudgeon
Posts: 73,957
Karma: 128903250
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
On an eInk screen, a line with one pixel in height is going to be too light.
|
06-07-2013, 07:42 PM | #8 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Interestingly enough, when I use my simple line code with the hr style amendments instead of using CSS, the line stays dark black even on an e-ink reader. Just tested on my Kobo.
Michelle |
06-07-2013, 07:48 PM | #9 |
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
|
In CSS a pixel is not a pixel; it is a pt so so depending on your ppi you may illuminate a line that is several pixels wide. This can make the line darker.
Dale |
06-08-2013, 04:19 AM | #10 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Your problem with different widths happened because you were using a border all around the element, including right and left, which makes the HR look wider. Apart from the solutions already given, you could have simply used border-top and border-bottom (or "border-width: 3px 0 3px 0").
|
06-08-2013, 09:31 AM | #11 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
hr { margin-left: 15%; width: 70%; color: #000000; /* suppress this style */ background-color: #000000; border: 0;/* add this new style */ } .thick_line { height: 3px; } .thin_line { height: 1px; } Code:
<hr class="thick_line" /> <hr class="thin_line" /> Last edited by RbnJrg; 06-08-2013 at 11:58 AM. |
|
Tags |
ade, alignment, hr element |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Hello/Image and text alignment | Derek R | Introduce Yourself | 3 | 06-26-2011 10:47 AM |
Image alignment and spacing | Derek R | Kindle Formats | 5 | 06-25-2011 12:57 PM |
Text alignment | James_Wilde | iRiver Story | 0 | 10-25-2010 04:22 AM |
left alignment | speakingtohe | Calibre | 2 | 08-13-2010 10:39 AM |
Vertical Alignment | gardefjord | ePub | 2 | 05-25-2010 09:59 PM |