Preventing breaks at the end of a line.

[GrannyGrump]

@Rubén ---
I really hate to rain on the party. I tried your NoWrap span, and in my usage, it failed.



.
I use "hanging indents" for poetry, and the spanned text slides to the left, superimposed over adjacent text. It seemed to do this both WITH and WITHOUT the text-indent:0 specified in the span.

Code:

Spoiler:

CSS:

.stanza{
margin-top: 1.0em;
margin-bottom: 1.25em;
margin-right: .5em;
margin-left: 2.5em;
}

.stanza p{
text-align: left;
text-indent: -2.75em; 
padding-left: 2.75em;
margin-top: 0;
margin-bottom: .15em;
hyphens: none;
-webkit-hyphens: none !important;
-moz-hyphens: none;
adobe-hyphenate: none;
}

.nowrap{
/*text-indent: 0 !important;*/
display: inline-block;
}

HTML:

<div class="stanza">
<p>“And now, when fifteen suns have each</p>
<p class="ins1">Fulfill’d in turn its circling year,</p>
<p>Thrown back again on England’s beach,</p>
<p class="ins1">Our bark paid off—HE drives me <i>Here!</i></p>
<p>I could not die in flood or <span class="nowrap">fight—</span></p>
<p>HE drives me <span class="midfont">HERE</span>!!”—</p>
<p class="aright">“And sarve you right!</p>
</div>

.
If I do manage to get the viewer window sized just right, so that the spanned word does drop to the next line, it does not indent as specified in the CSS.



.
Also, when I tried it in a normal paragraph (no negative indent), but justified, it gave an extremely wide spacing to the spanned word.




.
I tested in Sigil and Calibre viewer (QT based) and in ADE 2.0.

So this kind of span seems not to work well in paras with negative / hanging indents. The good news is that the Unicode ⁠& # 8 2 8 8 ; appears to be working fine with hanging indent.

Please let me know if I am doing something wrong with the code.

[doubleshuffle]

Tried it with the books I last coded, and didn't experience that problem. But I'm too tired to compare our code...

Spoiler:

div.stanza {margin-top: 1em; margin-bottom:0; margin-left: 3em; }

div.stanza > p	{text-indent: -3em; margin-bottom: 0; margin-top: 0; text-align: left}

div.stanza > p.ind2	{text-indent: -2em; margin-bottom: 0; margin-top: 0; text-align: left}

.nowrap {text-indent: 0;display: inline-block;}

.pl2  {padding-left:2em}

<div class="stanza pl2">
    <p>Go, let thy fancies range,</p>

    <p class="ind2">And ramble where they may</p>

    <p>View power in every change,</p>

    <p class="ind2">And what is its <span class="nowrap">display?—</span></p>

    <p>The country magistrate,</p>

    <p class="ind2">The lowest shade in power,</p>

    <p>To rulers of the <span class="nowrap">state?—</span></p>

    <p class="ind2">The meteors of an hour.</p>
  </div>

[RbnJrg]

Originally Posted by GrannyGrump

@Rubén ---
I really hate to rain on the party. I tried your NoWrap span, and in my usage, it failed.
...

Hi Granny;

Sorry, but I could not reproduce your issue. By applying your styles, I got the following output:



Take in count that I worked WITH text-indent:0 in the "nowrap" class. I can't understand why is not working for you.



Regards
Rubén

[GrannyGrump]

well, this IS strange.

I wonder if something farther down my stylesheet is causing some conflict. I will do some more experimenting, and see if I can learn why MINE is the only effort that failed.

But thanks, Ruben, for posting the code. I really want this to work!

[Tex2002ans]

Originally Posted by GrannyGrump

well, this IS strange.

I wonder if something farther down my stylesheet is causing some conflict. I will do some more experimenting, and see if I can learn why MINE is the only effort that failed.

But thanks, Ruben, for posting the code. I really want this to work!

GrannyGrump, I was able to duplicate your issue exactly, using the same code you provided.

Looks like you accidentally had the text-indent line commented out:

.nowrap{
/*text-indent: 0 !important;*/
display: inline-block;
}

That line seems to be key when doing the inline-block, so that the negative indent doesn't jam it into the previous text.

[GrannyGrump]

Actually, I tried WITH and WITHOUT the "text-indent:0". I got the same overlaid text either way. But I will play around with it some more. I will start by using a minimal CSS, and see what happens.....

[RbnJrg]

Originally Posted by GrannyGrump

Actually, I tried WITH and WITHOUT the "text-indent:0". I got the same overlaid text either way. But I will play around with it some more. I will start by using a minimal CSS, and see what happens.....

That's the key. Try to see if the epub I attach works for you.

[JSWolf]

RbnJrg, have you tried it in ADE 2.0.1? Sigil and Calibre don't count.

[RbnJrg]

Originally Posted by JSWolf

RbnJrg, have you tried it in ADE 2.0.1? Sigil and Calibre don't count.

I tried in ADE 2.0.67532 and it works fine (also in ADE 3 and upper). I don't have ADE 2.0.1 but Doitsu did the try with ADE 2.0 (post #20 of this thread) and it worked fine too.

Regards
Rubén

[GrannyGrump]

@Rubén and Tex ---- I am SO embarrassed.

Ruben, your code works fine, I must have had a typo in my first CSS, and must have been asleep at the wheel besides. Thank you once again for this solution!

[RbnJrg]

Originally Posted by GrannyGrump

@Rubén and Tex ---- I am SO embarrassed.

Ruben, your code works fine, I must have had a typo in my first CSS, and must have been asleep at the wheel besides. Thank you once again for this solution!

Glad the code works for you, Granny. And don't worry; all of us are humans, and we make mistakes (I more than others )

[Tex2002ans]

Originally Posted by RbnJrg

Glad the code works for you, Granny. And don't worry; all of us are humans, and we make mistakes (I more than others )

I never make mistakes.

[RbnJrg]

Originally Posted by Tex2002ans

I never make mistakes.

Well, I was speaking about humans

[Hitch]

Originally Posted by RbnJrg

Well, I was speaking about humans

MWAHAHAHAHAHAHA.


Hitch
(Who never makes mistakes, either...and I have a bridge in NY, if you believe that...)

[JSWolf]

Originally Posted by RbnJrg

I tried in ADE 2.0.67532 and it works fine (also in ADE 3 and upper). I don't have ADE 2.0.1 but Doitsu did the try with ADE 2.0 (post #20 of this thread) and it worked fine too.

Regards
Rubén

Link to ADE 2.0.1: http://www.adobe.com/support/digital...downloads.html