Hebrew characters putting words in the wrong place

[Siavahda]

Back again, sigh.

I have an ebook with three instances of Hebrew letters. The problem isn't getting them to display, exactly - with embedded Times font, that's covered. But the text around the letters - the words themselves are out of place, rearranged.

This is how it looks on the Kobo



This is what it looks like/how it reads in Calibre, the way it should be



Do you see? It's like the words after the Hebrew letter have been picked up and put in the wrong place. I don't know why. Is it something to do with Hebrew reading right to left? But I don't understand how that would matter when the ebook isn't set to read that way.

The ebook came with the characters themselves pasted in. I replaced them with unicode, just to see if that would make a difference, but alas it did not. I also tried all the pre-installed fonts, including the publisher one, and I tried embedding a Hewbrew font (PCSB Hebrew Regular). Nothing helped; in some fonts the characters appeared as numbers or other symbols, but still in the wrong place and with big spaces warping the paragraph.

I'm using EPUB, by the way, not KEPUB.

Html for this passage:

<p class="calibre15">“The magic of me and you, that’s what’s going to make this tattoo work. That’s the power of our Lineage of Two. I don’t need artistry. I’m using the Hebrew word for life. I already did the letter <i class="calibre14">chet</i>,” and he lifted up his shirt-tail to show a <span class="ja">ח</span> on his left buttock. “I just need you to do the <i class="calibre14">yod.</i>” He even handed me a cardboard square with the <span class="ja">י</span> drawn on it. “It doesn’t matter if it looks like shit.”</p>

original html (no unicode, no span class to mark the Hebrew)

<p class="calibre15">“The magic of me and you, that’s what’s going to make this tattoo work. That’s the power of our Lineage of Two. I don’t need artistry. I’m using the Hebrew word for life. I already did the letter <i class="calibre14">chet</i>,” and he lifted up his shirt-tail to show a ח on his left buttock. “I just need you to do the <i class="calibre14">yod.</i>” He even handed me a cardboard square with the י drawn on it. “It doesn’t matter if it looks like shit.”</p>

Relevant css:

.calibre15 {
  -moz-hyphens: none;
  -webkit-hyphens: none;
  display: block;
  hyphens: none;
  orphans: 1;
  text-align: justify;
  text-indent: 1em;
  margin: 0;
}
.calibre14 {
  font-style: italic;
}
.ja {
  font-style: normal;
  font-weight: normal;
  font-family: "times";
  }
.calibre11 (body class) {
  display: block;
  font-size: 1em;
  line-height: 1;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  text-align: justify;
  margin: 0 5pt;
}

[JSWolf]

Nothing we can do unless we see the HTML/CSS.

[Siavahda]

Originally Posted by JSWolf

Nothing we can do unless we see the HTML/CSS.

Apologies for being a twit and forgetting that. I edited the original post to include them.

[Karellen]

https://www.mobileread.com/forums/sh...d.php?t=374077

I resorted to using svg images of the characters. ^^

[Siavahda]

Originally Posted by Karellen

https://www.mobileread.com/forums/sh...d.php?t=374077

I resorted to using svg images of the characters. ^^

Oh! I would NEVER have thought of that, thank you!

You don't happen to know where I could get svgs of the characters? And I have no idea HOW to get svgs into an epub. Were you able to do it through Calibre?

[Siavahda]

Originally Posted by Karellen

https://www.mobileread.com/forums/sh...d.php?t=374077

I resorted to using svg images of the characters. ^^

Wait, no worries, I worked it out and did it AND IT WORKED! Ahhhhhhhh, thank you so much!

Honestly I think I'll start using this tactic whenever the Kobo throws a hissy fit over non-English characters!

[Karellen]

I got mine from Wiki Commons. Just search the name of the character you need. eg... https://commons.wikimedia.org/wiki/F...etter_Alef.svg
Some of them have duplicated characters like the above example, so it needs a bit of fiddling. Maybe you can search a better site.
But you don't even need to use svg. A png works just as well.

Just treat the svg like an image. Surround it in a <span class="svg"></span> and use something like this in the css...

.svg {
display: inline;
height: 1em;
}

[Karellen]

cross posted.

Great that you got it working!!