SVG and Rare Special Characters with Slashes Through Them (Angled Strike Through?)

Question

I have an SVG from a user who made their design in another software, and I've translated it to SVG which normally works fine. However, They used odd special characters somehow, probably from a special keyboard, that have what I would call "angled-strikethrough" resembling a forward slash positioned centered on top of each character. I am on Windows 10 in a current version of Google Chrome.

UPDATE: Thanks to answers below: These slashes are called "angled solidus" and they move out of their normal place as a letter to create a "combined glyph" where they act like a special character, but are actually two glyphs combined.

Here's the sample text:

n̸e̸w̸ h̸o̸r̸i̸z̸o̸n̸

Depending on your font, you may or may not see it the same way I do now, so here it is as raw code where it's probably more standard:

n̸e̸w̸ h̸o̸r̸i̸z̸o̸n̸

However, when this renders in an SVG with Arial font the slashes are not on top of the characters but immediate following with much less space than the letter-spacing. You can highlight the glyphs and see that they're one special character, not forward-slashes with negative letter spacing.

Is there a way to correct this offset with SVG to align the slashes over the letters the way the user saw them?

Here's a JSFiddle example with the text in question, scroll down it's large and vertical (rotated 90):

https://jsfiddle.net/o5ykche1/1/

And here's a comparison of their original design (note the text) compared to the SVG translation:

SVG Code Sample:

<svg xmlns="http://www.w3.org/2000/svg" id="mystyle-svg-2" class="mystyle-svg " width="1650" height="6750" viewBox="0 0 1650 6750"><desc>SVG Generated by MyStyle Renderer v3.10.3</desc><defs/><g id="image-bg-group"><rect x="0" y="0" width="1650" height="6750" fill="#CCC" id="image-background-fill-color" style="fill-opacity: 2.55;"/></g><g id="design-group" transform="matrix(13.5246,0,0,13.5246,0,0)"><g type="canvas" canvas_id="1" id="mystyle-export-2-canvas-0" class="mystyle-design-canvas"><rect x="0" y="0" width="122" height="500" fill="none" id="canvas-background-color" canvas-id="1" stroke="none" style="fill-opacity: 1; stroke-width: 0; stroke-opacity: 1;"/><g id="mystyle-svg-2-obj-1" mystyle-do-type="TEXT" transform="matrix(0.001,0.8,-0.8,0.001,24.9375,263.48)" style="opacity: 1;" class="mystyle-design-object"><g transform="translate(0,-22.4140625)" class="inner-text-container"><text x="0" y="0" fill="#000000" data-font-fam="arial" id="1" style="font-size: 40px; font-family: arial; dominant-baseline: text-before-edge;" xml:space="preserve"><tspan text-anchor="middle" style="font-family: arial; text-anchor: middle;" alignment-baseline="auto">n̸e̸w̸ h̸o̸r̸i̸z̸o̸n̸</tspan></text></g></g></g></g></svg>    

Answer 1

There is a bit of guesswork here, I am not a font specialist.

First, the feature you are running into is combining diacritics and their implementation in different font formats. I've looked at different fonts with FontForge, and found that for example

• DejaVu Sans (DejaVuSans.ttf), which renders the solidus strikethrough correctly on my machine, has no special instructions for the positioning of the glyph.
  That would be appropriate for a renderer that fully understands Unicode and automatically repositions the character to the start of the previous character and does not alter the advance.
• Consolas (CONSOLA.ttf), which shows the error, sets a OpenType mark tag and a OpenType mkmk positioning instruction with Δx_adv=-1126.
  That would be appropriate for a renderer that understands that mark repositions the character to the start of the previous character, but adds the width of the overlay as advance. To me, that looks buggy, but since Consolas is a proprietary font by Microsoft, and OpenType has been invented by the same, maybe there is some sense in such a behavior.
• Linux Libertine O (LinLibertine_R.otf), which renders correctly, sets a OpenType mark tag, but no positioning instruction.
  That would be appropriate for a renderer that understands that mark repositions the character to the start of the previous character and does not alter the advance.

My conclusion is that you either need a font rendering engine that understands the various instructions correctly, or a font that defines the diacritics in a way your rendering engine understands. If your end product is for browser use, you have no control over the rendering engine. Each correction you do might be right for one, but wrong for another.

A solution on SVG level does not work. While there is the dx attribute to position individual characters inside a string, it works on the combined glyph, i. e. letter and solidus are moved together, not in relation to each other (or more precisely, from my experiments, movement instructions on combining characters have no effect).

The only reliable solution that I can see is the construction of a specialized font that contains precomposed characters for the latin characters with solidus strikethrough, delivered as a web font. Unicode, if this list is to be trusted, does not contain codepoints for those.

Edit: A halfway maintanable solution might be to use the regular solidus 0x2F and reposition that. You'll have to figure out the width of all the alphabet characters, but then it should work. The example below uses just the size of the solidus itself. Like this: Nominal height for Arial is 1638, width of the solidus is 569, so for 20px the width is 569 × 20 ÷ 1638 = 6.95. Then the right side of the solidus always coincides with the right side of the character it covers. Add 1px as letter-spacing.

text {
    font-family: Arial, sans-serif;
}

<svg>
    <text x="20" y="50" font-size="20"
          dx="0 -6.95 1 -6.95 1 -6.95 1 0
           -6.95 1 -6.95 1 -6.95 1 -6.95 1 -6.95 1 -6.95 1 -6.95">n/e/w/ h/o/r/i/z/o/n/</text>
<svg>