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-09-2013, 08:19 AM   #1
Dalegaard
Junior Member
Dalegaard began at the beginning.
 
Posts: 1
Karma: 10
Join Date: Jun 2013
Device: Kindle 4
Line over text

Hello

I'm new to Sigil and I have a problem I was hoping someone who have an answer to.

I'm trying to create a line over a sub chapter heading but when I used the overline in text-decoration, the line is too close to the text and I don't know how to increase the distance between the text and the line.

I have also tried to use the border option but I don't know how to stop the border from going over the entire page width but only where the text is.

Hope it makes sense
Attached Thumbnails
Click image for larger version

Name:	Udklip.PNG
Views:	85
Size:	1.0 KB
ID:	106816  
Dalegaard is offline   Reply With Quote
Old 06-09-2013, 08:31 AM   #2
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
How about a horizontal rule? <hr /> The following is borrowed from another post:

You need to set the margin to half the width of space left over by the horizontal rule. Eg, if you want a rule that's 70% of the page width, that leaves 30% remaining, so you'd set the left margin to half of that space, or 15%:

CSS Code:

hr {
width: 70%;
margin-left: 15%
}
mrmikel is offline   Reply With Quote
Old 06-09-2013, 09:36 AM   #3
exaltedwombat
Evangelist
exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.exaltedwombat ought to be getting tired of karma fortunes by now.
 
Posts: 462
Karma: 1703930
Join Date: Nov 2011
Device: none
You will become a great deal happier when you re-define your task from 'reproducing the printed layout' to 'presenting the text in an ebook-appropriate manner'.
exaltedwombat is offline   Reply With Quote
Old 06-09-2013, 09:55 AM   #4
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,323
Karma: 4964183
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Maybe increasing "line-height" has the effect you are looking for.
Jellby is offline   Reply With Quote
Old 06-09-2013, 11:05 AM   #5
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: 496
Karma: 318998
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Dalegaard View Post
Hello

I'm new to Sigil and I have a problem I was hoping someone who have an answer to.

I'm trying to create a line over a sub chapter heading but when I used the overline in text-decoration, the line is too close to the text and I don't know how to increase the distance between the text and the line.

I have also tried to use the border option but I don't know how to stop the border from going over the entire page width but only where the text is.

Hope it makes sense
This trick can be useful for you but I think it doesn't work in ADE; in K4NT works perfectly. In your css stylesheet, write the following:

Code:
h2 {
   display: table; /*the key in order to get the top-line*/
   font-size: 1.4em;
   padding-top: 0.4em; /*here you control the gap between the text and the top-line*/
   margin: -0.35em auto 2em; /*the complement of the key*/
   border-top: 2px solid black;
}

p {
  font-size: 1em;
  text-align: justify;
  text-indent: 0;
}

p + p {
  text-indent: 1em;
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}
Now in your .html file write:

Code:
<body>
  <p class="center bold">CHAPTER 1</p>

  <h2>BLA BLA BLA BLA BLA</h2>

  <p>...</p>

  <p>...</p>

  ...
</body>
As you can see, the key is to display the text with the top-line AS A TABLE. And you center the table by applying margin-left and margin-right as "auto". With that you get what you want

Also you can use, alternatively, the following styles:

Code:
p {
  font-size: 1em;
  text-align: justify;
  text-indent: 0;
}

p + p {
  text-indent: 1em;
}

.top_line {
   display: table; /*the key in order to get the top-line*/
   font-size: 1.4em;
   font-weight: bold;
   text-indent: 0;
   padding-top: 0.4em; /*here you control the gap between the text and the top-line*/
   margin: -0.35em auto 2em; /*the complement of the key*/
   border-top: 2px solid black;
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}
And in your .html file:

Code:
<body>
  <p class="center bold">CHAPTER 1</p>

  <p class="top_line">BLA BLA BLA BLA BLA</p>

  <p>...</p>

  <p>...</p>

  ...
</body>
Below you can see a screenshot of my Kindle and I attach the respective .epub.

Regards
Rub้n
Attached Thumbnails
Click image for larger version

Name:	screen_shot-18467.gif
Views:	68
Size:	33.9 KB
ID:	106823  
Attached Files
File Type: epub top-line.epub (2.7 KB, 30 views)

Last edited by RbnJrg; 06-09-2013 at 11:26 AM.
RbnJrg is offline   Reply With Quote
Old 06-09-2013, 01:18 PM   #6
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,287
Karma: 6022733
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
I was going to suggest the border-top solution of RbnJrg

Use border Top if the line is only wanted if there is a sub title

Use a border-bottom (on the chapter title) if it is always wanted.
Padding-top (or bottom) sets the white space between the line and parent text
theducks is offline   Reply With Quote
Old 06-09-2013, 04:46 PM   #7
Steadyhands
Enthusiast
Steadyhands began at the beginning.
 
Steadyhands's Avatar
 
Posts: 32
Karma: 10
Join Date: Dec 2011
Location: Brisbane, Oz
Device: iPad2
What about if you want the line beside the heading like this?

I'd like a better way to do this as it doesn't allow for changes in the size of the chapter heading text, and I'd like it to start on the right then finish at the header.

Code:
  <h2>BLA BLA BLA BLA BLA</h2>

  <div class="ruleclass">
    <hr />
  </div>
Code:
.ruleclass {
   margin-left: 1em;
   margin-right: 1em;
   margin-top: -4em;
   }
hr {
   height: 3px;
   background:#505050;
   width: 40%;
   }
Attached Thumbnails
Click image for larger version

Name:	2013-06-10_053708.png
Views:	52
Size:	7.1 KB
ID:	106833  
Steadyhands is offline   Reply With Quote
Old 06-09-2013, 07:34 PM   #8
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: 496
Karma: 318998
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Steadyhands View Post
What about if you want the line beside the heading like this?

I'd like a better way to do this as it doesn't allow for changes in the size of the chapter heading text, and I'd like it to start on the right then finish at the header.
Hmmm, I don't know if this will work for you, but you can do a try. In your css stylesheet write:

Code:
h2 {
   font-size: 1.4em;
   text-align: left;
   margin: 1em 0;
   white-space: nowrap;
}

h2:after {
   display: inline;
   font-size: 1.2em;
   text-overflow: clip;
   white-space: nowrap;
   word-spacing: -10px;
   content:" ————————————————————————————————————————————————————————————";
}

And in your .html file write:

Code:
<h2>BLA BLA BLA BLA</h2>

<p>.... something ...</p>
I really don't know if your reader can support the pseudo-element :after.

Regards
Rub้n
Attached Thumbnails
Click image for larger version

Name:	line-aside.png
Views:	41
Size:	16.0 KB
ID:	106840  

Last edited by RbnJrg; 06-09-2013 at 07:42 PM.
RbnJrg is offline   Reply With Quote
Old 06-09-2013, 08:26 PM   #9
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,287
Karma: 6022733
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by RbnJrg View Post
Hmmm, I don't know if this will work for you, but you can do a try. In your css stylesheet write:


Regards
Rub้n
Ooo!
Looked great in Sigil
then I sent it to my PEz (ADE based)
no line.
At least it did not barf and failed gracefully (unusual for this version)
theducks is offline   Reply With Quote
Old 06-09-2013, 09:30 PM   #10
Steadyhands
Enthusiast
Steadyhands began at the beginning.
 
Steadyhands's Avatar
 
Posts: 32
Karma: 10
Join Date: Dec 2011
Location: Brisbane, Oz
Device: iPad2
Quote:
Originally Posted by RbnJrg View Post
Hmmm, I don't know if this will work for you, but you can do a try. In your css stylesheet write:

[
I really don't know if your reader can support the pseudo-element :after.

Regards
Rub้n
Thanks, I'm using an iPad and it sort of works. Sigil displays it correctly, Calibre viewer and iBooks display a series of dashes ie — — — —

The good thing is it works on chapter One ———— and on Twenty-Three ———— just as well and the lines don't flow through to the next line.

I added a font-size: to the h2:after to reduce the thickness of the em dashes.
Steadyhands is offline   Reply With Quote
Old 06-09-2013, 11:29 PM   #11
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: 38,689
Karma: 19643753
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
This has nothing to do with Sigil. This is an ePub issue. Please some moderator move the thread. Thanks.

We get too many threads in here that have nothing to do with Sigil.
JSWolf is offline   Reply With Quote
Old 06-09-2013, 11:40 PM   #12
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,287
Karma: 6022733
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Agreed
Moderator Notice
Moved
theducks is offline   Reply With Quote
Old 06-10-2013, 04:03 AM   #13
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,323
Karma: 4964183
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by RbnJrg View Post
I really don't know if your reader can support the pseudo-element :after.
... and "content" is not a property supported in the ePub 2.0.1 spec, and you cannot be sure that the dashes will form a continous line in every font.
Jellby is offline   Reply With Quote
Old 06-10-2013, 06:47 AM   #14
Steadyhands
Enthusiast
Steadyhands began at the beginning.
 
Steadyhands's Avatar
 
Posts: 32
Karma: 10
Join Date: Dec 2011
Location: Brisbane, Oz
Device: iPad2
Quote:
Originally Posted by Jellby View Post
... and "content" is not a property supported in the ePub 2.0.1 spec, and you cannot be sure that the dashes will form a continous line in every font.
That seems the be the issue, I'm thinking of adding a extra loooong dash to my on dinkus font I've created. I'll make it about 30 em dashes long and see how it goes. Then I can embed the font.
Steadyhands is offline   Reply With Quote
Old 06-10-2013, 09:08 AM   #15
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: 496
Karma: 318998
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Steadyhands View Post
Thanks, I'm using an iPad and it sort of works. Sigil displays it correctly, Calibre viewer and iBooks display a series of dashes ie — — — —

The good thing is it works on chapter One ———— and on Twenty-Three ———— just as well and the lines don't flow through to the next line.

I added a font-size: to the h2:after to reduce the thickness of the em dashes.
Try changing:

Code:
content:" ————————————————————————————————————————————————————————————";
by

Code:
content:" _____________________________________________________________";
There is another method to achieve what you want that I think it could work in ADE too; if later I have a bit of free time, I will post it.
RbnJrg 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
Images always show on new page, even if there's only 1 line of text on previous pg SarahMB ePub 13 01-19-2013 05:37 PM
Since 1.9.10, text slightly cut off on very bottom line danskmacabre Kobo Reader 33 01-13-2012 06:25 AM
Two columns of text, line down middle? chingu ePub 2 09-04-2011 07:12 PM
Text file formatting - line feeds and spaces Fallingwater Workshop 6 07-04-2011 03:42 PM
changing text line-height in css wjcroft EPUBReader 0 12-15-2010 04:13 PM


All times are GMT -4. The time now is 09:41 AM.


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