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 04-09-2009, 11:52 AM   #1
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: 5,984
Karma: 4346919
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Centering and adjusting the width of a block

Hi all,

This is more about CSS than ePUB, but I want it to work in ePUB readers, so I guess I can ask here anyway.

The thing is I have the chapter titles in an ePUB defiened just with <h1>Chapter 1</h1>, and want them to appear horizontally centered and with a line below that extends a bit (say 1em) left and right. What rules could I use in the CSS for h1 {} ?

Let's see:

Code:
  text-align: center;
  border-width 0 0 2px 0;
is no good. The title is centered, but the line extends all the way to left and right borders of the page

Code:
  text-align: center;
  border-width 0 0 2px 0;
  margin: 0 1em 0 1em;
is better, but still the margin is measured from the page border inwards, and I want it to be measured from the text limit outwards. In fact, this works:

Code:
  text-align: center;
  border-width 0 0 2px 0;
  padding: 0 1em 0 1em;
  display: inline;
but the text is not centered in the page, and the vertical spacing is screwed (that's what you get with an inline element).

At the end I found this to work in the browser:

Code:
  border-width 0 0 2px 0;
  margin: auto;
  padding: 0 1em 0 1em;
  display: table;
But alas! It doesn't work in ADE, the chapter title is displayed twice instead, and left-aligned.

Does anyone have any solution?

(and no, text-decoration: underline is no solution for this )
Jellby is offline   Reply With Quote
Old 04-09-2009, 12:05 PM   #2
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,400
Karma: 4961459
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
wrap the text inside <h1> in a <span> and use border on that
kovidgoyal is offline   Reply With Quote
Old 04-09-2009, 12:28 PM   #3
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: 5,984
Karma: 4346919
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by kovidgoyal View Post
wrap the text inside <h1> in a <span> and use border on that
Thanks, but that somehow defeats separation of content and presentation, doesn't it?
Jellby is offline   Reply With Quote
Old 04-09-2009, 12:38 PM   #4
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 25,400
Karma: 4961459
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
Use text-decoration: underline
kovidgoyal 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
Centering PDF nguirado Amazon Kindle 5 10-04-2010 08:45 PM
How to do centering sjohnson717 Calibre 15 02-28-2010 09:20 AM
Tools for adjusting ePub for specifi readers? tompe ePub 10 12-30-2009 03:26 PM
Help adjusting line size, please. Stitchawl Calibre 4 04-05-2009 10:53 PM


All times are GMT -4. The time now is 07:35 PM.


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