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

[JSWolf]

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

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

Is the screenshot from a Kobo displaying KePub? That's where the problem is. The line used is too thin. If there is a way to change the thickness of the line in CSS, I do not know it.

[Turtle91]

No. It’s not from a Kobo. I was just responding to Quoth’s statement of not using text-decoration.

The only way I know to change the text-decoration thickness is: text-decoration-thickness: 10%; where the % is of 1em.

[DNSB]

Originally Posted by DaveLessnau

According to the mozilla.org site:

https://developer.mozilla.org/en-US/...tion-thickness

I can use text-decoration-thickness to change the thickness of that line and make it more visible. When I try, the Calibre editor "check book" function doesn't recognize it ("Unknown property").

To quote from the Mozilla page you linked to in the Specification section:

CSS Text Decoration Module Level 4

[Turtle91]

text-decoration-width was changed to text-decoration-thickness at some point… not sure when, and I’m pretty sure it will take a while before everything is updated to use the new term.

Edit: changed in 2019 - still in draft of course

[enuddleyarbl]

Originally Posted by DNSB

To quote from the Mozilla page you linked to in the Specification section:

CSS Text Decoration Module Level 4

Yep. Sorry. I didn't see that note about the spec level. Also, even if I had seen it, I don't think I'd have realized what it meant. But, after doing a bit more searching on text-decoration-width (which, as Turtle91 pointed out was the earlier term for text-decoration-thickness), I came across this 2016 issue in Github about it:

https://github.com/w3c/csswg-drafts/issues/239

Blood was flowing a bit in there. That issue was closed in 2017 because the proposed text-decoration-width solution was accepted into the draft spec of the next css version:

https://drafts.csswg.org/css-text-de...kness-property

It's also interesting that the 2017 issue referenced a 2012 message on the same problem:

https://lists.w3.org/Archives/Public...2Jul/0445.html

Regardless, I don't think there's any way around this until either something is fixed with kepubs or the next css version goes live.

I haven't tried RbnJrg's method because, frankly, I don't understand it.

[JSWolf]

Originally Posted by DaveLessnau

Regardless, I don't think there's any way around this until either something is fixed with kepubs or the next css version goes live.

Even if CSS4 "goes live" and it was taken on board as the next ePub standard, you would need to wait for Kobo to implement it. That could be a very long time or maybe never.

[Turtle91]

Originally Posted by JSWolf

Even if CSS4 "goes live" and it was taken on board as the next ePub standard, you would need to wait for Kobo to implement it. That could be a very long time or maybe never.

Or they could already be ready and just waiting for the day it becomes final....such pessimism

[JSWolf]

Originally Posted by Turtle91

Or they could already be ready and just waiting for the day it becomes final....such pessimism

I have experience with such companies not updating to the latest software. RMSDK is not the latest version (for example).

[RbnJrg]

Originally Posted by DaveLessnau

I haven't tried RbnJrg's method because, frankly, I don't understand it.

Well, it's not a complicated css code I'll say that is elementary but I will explain you gladly, if you want, what you don't understand.

[rjwse@aol.com]

this is a work around which is a lot of trouble to go to.

[rjwse@aol.com]

After doing a strikethrough sometimes there will be new text replacing it. Here is an emphatic way of doing that. Pop

[Quoth]

The circle looks terrible and I've never seen that. Colour is a bad idea for ebooks as about 1/2 are consumed on eInk.

[Doitsu]

@DaveLessnau

If you only need to format a handful of words as strikethrough text, you could hard-code them using a special Unicode character:

Combining Long Stroke Overlay (U+0336)


For example:

<p>This is s&#x0336;t&#x0336;r&#x0336;i&#x0336;k&#x0336;e&#x0336;t&#x0336;h&#x0336;r&#x0336;o&#x0336;u&#x0336;g&#x0336;h text.</p>

Obviously, this isn't a perfect solution.

[enuddleyarbl]

Originally Posted by rjwse@aol.com

this is a work around which is a lot of trouble to go to.

I tested that with classes on a style sheet instead of with styles on the html/body page. It doesn't work on my Kobo Forma as a kepub. I've got test cases for a strike class and for using <del>, <s> and <striike> tags. In none of those on the Forma does the strikethrough line (I guess a border line with your method) get any thicker. In all cases, it's that 1 pixel thick line. Even more interesting, in the cases of the <del>, <s> and <strike> tags, the struck text is actually lowered on the page. But, the strike class (and putting the text-decoration line as a style in the <span>, keeps the struck text in the proper position.



EDIT: Forgot to include my actual classes:

@page {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.strike {
  text-decoration: line-through;
}
.strike2 {
  text-decoration: line-through;
  text-decoration-style: solid;
  text-decoration-color: black;
  text-decoration-thickness: 30%;
}
sspan, strike, del, s	{
  border-bottom:	10px;
  position:	relative;
  top:	-0.6em;
}
sspan, strike span, del span, s span	{
    position:	relative;
  top:	0.6em;
}

<p>This is a <span class="strike"><span>strikethrough</span></span> with strike class</p>

<p>This is a <del><span>strikethrough</span></del> with del tag</p>

<p>This is a <s><span>strikethrough</span></s> with s tag</p>

<p>This is a <strike><span>strikethrough</span></strike> with strike tag</p>

<p>This is a <span style="text-decoration:line-through;"><span>strikethrough</span></span> with a style=“text-decoration:line-through;” bit</p>

[enuddleyarbl]

Originally Posted by Doitsu

@DaveLessnau

If you only need to format a handful of words as strikethrough text, you could hard-code them using a special Unicode character:

Combining Long Stroke Overlay (U+0336)


For example:

<p>This is s&#x0336;t&#x0336;r&#x0336;i&#x0336;k&#x0336;e&#x0336;t&#x0336;h&#x0336;r&#x0336;o&#x0336;u&#x0336;g&#x0336;h text.</p>

Obviously, this isn't a perfect solution.

I think that's the big issue I had with RbnJrg's method: each word would have to be struck uniquely.