Question: How to display overwritten/overlapping text

[ElMiko]

I would like to simulate the effect of overwritten text, as one might seen on a typewriter where two (or more) characters have been struck over the other(s). Do existing epub2 and epub3 e-reader allow for this effect?

my current idea is to use "letter-spacing" like this:

.ow {
	letter-spacing: -0.65em;
 	margin: 0 0.25em;
	}
.ow2 {
	margin: 0 0.25em;
	}

<p>I have <span class="ow">tx</span><span class="ow">ox</span><span class="ow2"> </span>go.</p>

which produces text that reads "I have to go" with the "to" overlapped by "xx" in Preview and PageEdit. Obviously, the spacing is going to be sensitive to different font-families and kerning within the font-family itself (if it isn't monospace), but would this even render as desired in actual e-reading software/hardware in theory?

Alternately, is there a better CSS solution?

[RbnJrg]

Originally Posted by ElMiko

I would like to simulate the effect of overwritten text, as one might seen on a typewriter where two (or more) characters have been struck over the other(s). Do existing epub2 and epub3 e-reader allow for this effect?

my current idea is to use "letter-spacing" like this:

.ow {
	letter-spacing: -0.65em;
 	margin: 0 0.25em;
	}
.ow2 {
	margin: 0 0.25em;
	}

<p>I have <span class="ow">tx</span><span class="ow">ox</span><span class="ow2"> </span>go.</p>

which produces text that reads "I have to go" with the "to" overlapped by "xx" in Preview and PageEdit. Obviously, the spacing is going to be sensitive to different font-families and kerning within the font-family itself (if it isn't monospace), but would this even render as desired in actual e-reading software/hardware in theory?

Alternately, is there a better CSS solution?

The easiest way, that is supported by epub2/epub3, is by employing the property "display: inline-block". For example:

<p>This text is<span class="over">overwritten</span> and this is not overwritten.</p>

.over {
   display: inline-block;
   margin-left: -5em; /* or what you wish */
}

[ElMiko]

@RbnJrg.... welp. Your solution is definitely superior to mine.

Thank you.

And to your knowledge, e-readers will honor this?

(separately, does letter-spacing only work in epub3, or does it work in epub2, too?)

[RbnJrg]

Originally Posted by ElMiko

@RbnJrg.... welp. Your solution is definitely superior to mine.

Thank you.

You are welcome

And to your knowledge, e-readers will honor this?

Yes, even ADE 2.0 will honor "display: inline-block"; don't worry about that.

(separately, does letter-spacing only work in epub3, or does it work in epub2, too?)

In theory, it should be supported even by epub2 ebooks. But ADE 2.x/3.x doesn't honor the property.

[Quoth]

Letter spacing might work in headings sometimes on ADE /epub2?

An annoying feature of headings is that they may automatically bold, which is certainly not wanted if the font face is a bold kind, so the CSS for a heading might need

display: block;
font-family: "Gaelic", serif;
font-weight: normal;

I tend to pick fonts that look OK for what they are used for without having to mess with letter spacing.

[JSWolf]

Originally Posted by RbnJrg

You are welcome



Yes, even ADE 2.0 will honor "display: inline-block"; don't worry about that.



In theory, it should be supported even by epub2 ebooks. But ADE 2.x/3.x doesn't honor the property.

The only thing you can do in ADE 2.0.1 is to embed a font that has a thin space and use that to space the letters.