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-07-2013, 05:16 PM   #1
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 199
Karma: 12798
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%" />
but ADE didn't recognize text-align:center. So in a rather convoluted way I coded in:

Code:
<hr style="margin-left:15%; border:3px solid #000000; width:70%" />
and it works fine in ADE and other ePub programs BUT...

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%" />
and now, because of the different line thickness, the two lines do not line up perfectly beneath each other (see attached jpeg) as they did with my old HTML4 code.

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.
Attached Thumbnails
Click image for larger version

Name:	ADE1.jpg
Views:	147
Size:	103.8 KB
ID:	106745  
eggheadbooks1 is offline   Reply With Quote
Old 06-07-2013, 06:12 PM   #2
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 199
Karma: 12798
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
eggheadbooks1 is offline   Reply With Quote
 
Advertisement
Old 06-07-2013, 06:33 PM   #3
RbnJrg
Guru
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: 746
Karma: 2641071
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by eggheadbooks1 View Post
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
Also you can use CSS; try this css code in your css stylesheet:

Code:
hr {
   text-align: center;
   width: 70%;
   color: #000000;
   background-color: #000000;
}

.thick_line {
   height: 3px;
}

.thin_line {
   height: 1px;
}
And in the .html file use:

Code:
  <hr class="thick_line" />
  <hr class="thin_line" />
to display the two lines (see below a screenshot of my Kindle).

Regards
Rubén
Attached Thumbnails
Click image for larger version

Name:	screen_shot-18458.gif
Views:	129
Size:	11.2 KB
ID:	106752  
Attached Files
File Type: epub Styling hr.epub (2.4 KB, 48 views)
RbnJrg is offline   Reply With Quote
Old 06-07-2013, 06:48 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 45,358
Karma: 32532934
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by RbnJrg View Post
Also you can use CSS; try this css code in your css stylesheet:

Code:
hr {
   text-align: center;
   width: 70%;
   color: #000000;
   background-color: #000000;
}

.thick_line {
   height: 3px;
}

.thin_line {
   height: 1px;
}
And in the .html file use:

Code:
  <hr class="thick_line" />
  <hr class="thin_line" />
to display the two lines (see below a screenshot of my Kindle).

Regards
Rubén
There is a problem with this in ADE. The fix is very simple. Replace the text-align: center in the hr CSS as follows...

Code:
hr {
margin-left: 15%;
width: 70%;
color: #000000;
background-color: #000000;
}
Then it will work and the lines will be centered. Other then that, the code is very neat and tidy.
JSWolf is offline   Reply With Quote
Old 06-07-2013, 06:58 PM   #5
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 199
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Thanks for these. Will do.

Michelle
eggheadbooks1 is offline   Reply With Quote
Old 06-07-2013, 07:08 PM   #6
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 199
Karma: 12798
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
Attached Thumbnails
Click image for larger version

Name:	ADE2.jpg
Views:	126
Size:	114.4 KB
ID:	106759  
eggheadbooks1 is offline   Reply With Quote
Old 06-07-2013, 07:55 PM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 45,358
Karma: 32532934
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
On an eInk screen, a line with one pixel in height is going to be too light.
JSWolf is offline   Reply With Quote
Old 06-07-2013, 08:42 PM   #8
eggheadbooks1
Read, don't parrot.
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 199
Karma: 12798
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
eggheadbooks1 is offline   Reply With Quote
Old 06-07-2013, 08:48 PM   #9
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: 10,519
Karma: 9826952
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2
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
DaleDe is offline   Reply With Quote
Old 06-08-2013, 05:19 AM   #10
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,997
Karma: 8796439
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").
Jellby is offline   Reply With Quote
Old 06-08-2013, 10:31 AM   #11
RbnJrg
Guru
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: 746
Karma: 2641071
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by eggheadbooks1 View Post
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
Try this code in your css stylesheet:

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;
}
And, as before, in the .html file use:

Code:
  <hr class="thick_line" />
  <hr class="thin_line" />
I think after that, you won't have the beveled edge and your lines will be sharper.

Last edited by RbnJrg; 06-08-2013 at 12:58 PM.
RbnJrg is offline   Reply With Quote
Reply

Tags
ade, alignment, hr element

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Hello/Image and text alignment Derek R Introduce Yourself 3 06-26-2011 11:47 AM
Image alignment and spacing Derek R Kindle Formats 5 06-25-2011 01:57 PM
Text alignment James_Wilde iRiver Story 0 10-25-2010 05:22 AM
left alignment speakingtohe Calibre 2 08-13-2010 11:39 AM
Vertical Alignment gardefjord ePub 2 05-25-2010 10:59 PM


All times are GMT -4. The time now is 08:21 AM.


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