"text-decoration: line-through;" Barely Visible on Kobo Forma

[PeterT]

It's a shame. I'd been thinking of pushing a link to a thread that included a font tester Epub that displays a range of characters, languages, and markups but... it doesn't include any strike through or underline examples

Sent from my Pixel 4a using Tapatalk

[JSWolf]

I've found out the problem. The problem is with KePub. I get the same sort of weak barely noticeable line. But with ePub, it's good to go.

[enuddleyarbl]

Originally Posted by JSWolf

I've found out the problem. The problem is with KePub. I get the same sort of weak barely noticeable line. But with ePub, it's good to go.

OK. Thanks. At least I know it's not me.

I reported that here:

https://github.com/kobolabs/epub-spec/issues/60

I'm hoping that approximates a proper reporting location.

[JSWolf]

I tried some CSS to make the line thicker and it did not work. Maybe there's a patch that can be made to fix this.

[JSWolf]

I've requested a patch for this problem if such a patch can be created and someone is willing to do so.

[PeterT]

A minor request... Could we maybe keep discussion of this to a single thread? I'm loosing track of how many distinct threads you've created on different aspects of this.

Sent from my Pixel 4a using Tapatalk

[Uncle Robin]

Originally Posted by PeterT

A minor request... Could we maybe keep discussion of this to a single thread? I'm loosing track of how many distinct threads you've created on different aspects of this.

Sent from my Pixel 4a using Tapatalk

Seconded. I wonder if the mods could sort this?

[enuddleyarbl]

Sorry about that. I figured that since this turned out to be a kepub issue and not an epub issue, this forum would no longer be the best place for the discussion. I'm not sure if I can delete a thread I've started if it already has responses. But, I have no issue with a moderator doing so. This thread's probably got the most information in it and JSWolf has said he's requested a patch from somewhere. So, getting rid of the one in the Kobo Reader forum is probably for the best.

[Uncle Robin]

Originally Posted by DaveLessnau

So, getting rid of the one in the Kobo Reader forum is probably for the best.

Following the clearly stated and oft-repeated direction not to create multiple threads for the same issue is probably for the best.

[Quoth]

Originally Posted by JSWolf

I've found out the problem. The problem is with KePub. I get the same sort of weak barely noticeable line. But with ePub, it's good to go.

Not the only issue with the Kobo proprietary version of epub.

But I'd avoid "text decoration" CSS in books and see no use at all for strike through except in a book or essay about typewriters.

[Turtle91]

Originally Posted by Quoth

Not the only issue with the Kobo proprietary version of epub.

But I'd avoid "text decoration" CSS in books and see no use at all for strike through except in a book or essay about typewriters.

What about authors that are describing a hand-written letter from someone who can’t make up their mind in what to say???

Strike-through is exactly what you want. Whether you use a <span>, <s>, or <del> tag (<strike> is not supported in HTML5) it is highly recommended to use the ‘text-decoration: line-through’ css to explicitly define the behavior of the tag rather than rely on some “default behavior”.


Same argument applies to underline words: ‘text-decoration: underline’

edit: added images and example code

.strike {
	text-decoration: line-through;
}

div.write p {
	margin-bottom: 0.5em;
	font-size: 1.2em;
	font-family: "Monotype Corsiva", "cursive";
	font-style: italic;
	text-indent: 0;
}

div.write p.sig {
	text-align: right;
	margin: 0.25em 0 2em;
}



<div class="write">
    <p>Bella,</p>

    <p class="strike">I don’t know why you’re making Charlie carry notes to Billy like we’re in second grade—if I wanted to talk to you I would answer the&nbsp;&nbsp;&nbsp;</p>

    <p class="strike">You made the choice here, okay? You can’t have it both ways when&nbsp;&nbsp;&nbsp;</p>

    <p class="strike">What part of ‘mortal enemies’ is too complicated for you to&nbsp;&nbsp;&nbsp;</p>

    <p class="strike">Look, I know I’m being a jerk, but there’s just no way around&nbsp;&nbsp;&nbsp;</p>

    <p class="strike">We can’t be friends when you’re spending all your time with a bunch of&nbsp;&nbsp;&nbsp;</p>

    <p class="strike">It just makes it worse when I think about you too much, so don’t write anymore&nbsp;&nbsp;&nbsp;</p>

    <p>Yeah, I miss you, too. A lot. Doesn’t change anything. Sorry.</p>

    <p class="sig">Jacob</p>
  </div>

[Turtle91]

… and if anyone has a problem with my sparkly vampire example ‘we gonna fight’!

[enuddleyarbl]

Originally Posted by Quoth

Not the only issue with the Kobo proprietary version of epub.

But I'd avoid "text decoration" CSS in books and see no use at all for strike through except in a book or essay about typewriters.

As Turtle91 noted, the problem is that sometimes strikethrough is exactly what's needed. In reality, this book is one of the very few I've seen that use it. But, in this case, it has to be used. Cosmic rays are striking the character's head and causing inspiration to pour through his brain. He's desperately trying to write scripts from those spurts of random inspiration. So, he furiously writes things down and scratches them out when he doesn't get it right.

Strikethrough.

If I could come up with some replacement for what the author's using, I'd use it. But, I can't come up with anything.

[Quoth]

Originally Posted by Turtle91

What about authors that are describing a hand-written letter from someone who can’t make up their mind in what to say???

Certainly that's valid.

[RbnJrg]

You could try something like the following:

1) In your .xhtml code:

<p>This is a test<span class="lineThrought"></span> to simulate line-throught style</p>

2) In your .css stylesheet:

.lineThrought {
    display: inline-block; /* This is key */
    width: 1.4em; /* You must adapt the value according to the text to be strikethrough */
    margin-left: -1.4em; /* This is linked with the above value */
    margin-bottom: 0.15em; /* This is linked with the font-size */
    border-bottom: 3px solid black; /* Use here the width of you wish */
}

Of course, by using the above code, you'll need a different style for any word to be strikethrough. So, you could use a variant:

1) In your .xhtml code:

<p>This is a test<span class="lineThrought recoll1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> to simulate line-throught style</p>

2) In your .css stylesheet:

.lineThrought {
    display: inline-block; /* This is key */
    line-height: 0; /* This is key; now you don't use margin-bottom */
    border-bottom: 3px solid black; /* Use here the width of you wish */
}

.recoll1 {
    margin-left: -1.4em; /* This is linked with the width of the strikethrough word */
}

With this last variant you'll need only to use several .recollX styles.

And the workaround looks fine.