Line over text

Dalegaard · 06-09-2013, 07:19 AM

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

mrmikel · 06-09-2013, 07:31 AM

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%
}

exaltedwombat · 06-09-2013, 08:36 AM

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'.

Jellby · 06-09-2013, 08:55 AM

Maybe increasing "line-height" has the effect you are looking for.

RbnJrg · 06-09-2013, 10:05 AM

Quote:

Originally Posted by Dalegaard

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

theducks · 06-09-2013, 12:18 PM

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

Steadyhands · 06-09-2013, 03:46 PM

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%;
   }

RbnJrg · 06-09-2013, 06:34 PM

Quote:

Originally Posted by Steadyhands

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

theducks · 06-09-2013, 07:26 PM

Quote:

Originally Posted by RbnJrg

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)

Steadyhands · 06-09-2013, 08:30 PM

Quote:

Originally Posted by RbnJrg

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.

JSWolf · 06-09-2013, 10:29 PM

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.

theducks · 06-09-2013, 10:40 PM

Agreed

Moderator Notice
Moved

Jellby · 06-10-2013, 03:03 AM

Quote:

Originally Posted by RbnJrg

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.

Steadyhands · 06-10-2013, 05:47 AM

Quote:

Originally Posted by Jellby

... 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.

RbnJrg · 06-10-2013, 08:08 AM

Quote:

Originally Posted by Steadyhands

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.

06-09-2013, 07:19 AM	#1
Dalegaard Junior Member 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

06-09-2013, 03:46 PM	#7
Steadyhands Connoisseur Posts: 57 Karma: 10 Join Date: Dec 2011 Device: Samsung Tablet	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

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 04:37 PM
Since 1.9.10, text slightly cut off on very bottom line	danskmacabre	Kobo Reader	33	01-13-2012 05:25 AM
Two columns of text, line down middle?	chingu	ePub	2	09-04-2011 06:12 PM
Text file formatting - line feeds and spaces	Fallingwater	Workshop	6	07-04-2011 02:42 PM
changing text line-height in css	wjcroft	EPUBReader	0	12-15-2010 03:13 PM

06-09-2013, 07:31 AM	#2
mrmikel Color me gone Posts: 2,089 Karma: 1445295 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% }

06-09-2013, 08:36 AM	#3
exaltedwombat Guru Posts: 878 Karma: 2457540 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'.

06-09-2013, 08:55 AM	#4
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Maybe increasing "line-height" has the effect you are looking for.

06-09-2013, 12:18 PM	#6
theducks Well trained by Cats Posts: 30,891 Karma: 59840954 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	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

06-09-2013, 10:29 PM	#11
JSWolf Resident Curmudgeon Posts: 79,018 Karma: 144284074 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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.

06-09-2013, 10:40 PM	#12
theducks Well trained by Cats Posts: 30,891 Karma: 59840954 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Agreed Moderator Notice Moved

Advert

Advert