View Full Version : 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
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:


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:


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



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:


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

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

<div class="ruleclass">
<hr />
</div>

.ruleclass {
margin-left: 1em;
margin-right: 1em;
margin-top: -4em;
}
hr {
height: 3px;
background:#505050;
width: 40%;
}

RbnJrg
06-09-2013, 06:34 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.



Hmmm, I don't know if this will work for you, but you can do a try. In your css stylesheet write:


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:


<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
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 :D and failed gracefully (unusual for this version)

Steadyhands
06-09-2013, 08:30 PM
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. :2thumbsup

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
Moved

Jellby
06-10-2013, 03:03 AM
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
... 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
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. :2thumbsup

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

Try changing:


content:" —————————————————————————————————————————————————— ——————————";


by


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
06-10-2013, 09:16 AM
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.

Here is the another method; this one works also in ADE and should be the definitive solution for your issue. In your css stylesheet, write:


h2 {
margin: 0;
}

.line_aside {
display: block;
height: 2em;
border-bottom: 3px solid black;
margin: -0.5em 0 1em;
background: white;
}

.text {
float:left;
font-weight: bold;
padding: 0 16px 0 5px;
margin: 1em 0 0 -0.2em;
font-size: 1.2em;
background: white !important;
}

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

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


And in your .html file write:


<h2 class="line_aside"><span class="text">BLA BLA BLA BLA</span></h2>

<p> ...something... </p>


Below I attach a screenshot of ADE and the respective epub.

Regards
Rubén

Steadyhands
06-10-2013, 02:37 PM
Here is the another method; this one works also in ADE and should be the definitive solution for your issue. In your css stylesheet, write:


Thanks very much Rubén. I've tried both additional methods on the PC with success. Yet to reload a file to the iPad, will report back here later.

JSWolf
06-10-2013, 04:14 PM
Thanks very much Rubén. I've tried both additional methods on the PC with success. Yet to reload a file to the iPad, will report back here later.

Please don't use iPad when you mean a specific app.

Steadyhands
06-11-2013, 03:04 PM
Either of the last two methods work in iBooks.

Thanks again Rubén

RbnJrg
06-11-2013, 03:45 PM
Either of the last two methods work in iBooks.

Thanks again Rubén

You are welcome :)