Thread: Line over text
View Single Post
Old 06-09-2013, 10:05 AM   #5
RbnJrg
Wizard
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: 1,823
Karma: 8700631
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:	231
Size:	33.9 KB
ID:	106823  
Attached Files
File Type: epub top-line.epub (2.7 KB, 226 views)

Last edited by RbnJrg; 06-09-2013 at 10:26 AM.
RbnJrg is offline   Reply With Quote