Fix emoji replacements, make emoji images consistent

[silverwind]

• Fix emoji not being replaced in issue title change text
• Make the image attributes consistent, add alt, remove align

Before:

After:

[lafriks]

Tests seem to fail

[silverwind]

Fixed

[silverwind]

Hmm there seems to be some double escaping going on which makes pull_create_test.go fail, will check out later.

[CL-Jeremy]

This could lead to some confusion when changing title between emoji literals and shorthands. Not a big thing though.

Anyway, found this amazing snippet to fix :gitea: not getting struck through, as well as the misalignment due to span.emoji having a vertical-align offset:

strike {
    text-decoration: none;
    position: relative;
    display: inline-block;
}
strike:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: calc(50% - 0.5px);
    width: 100%;
    border-top: 1px solid;
}

Edit: changing from strike/strike:after to strike .emoji/strike .emoji:after fixes the wrapping issue, but again they seem to misalign a bit.

Changing vertical-align of .emoji from -.075em to -.05em and that of .emoji img from -.15em to -.175em fixed the alignment issue, but there always seems to be an 0.025em offset between the image ‘emojis’ and real emojis on my macOS test system. That is, if I don't change vertical-align, but change strike:after { height } from calc(50% - .5px) to 50%, :gitea: would misalign and real emojis would look fine, while currently emojis misaligns and :gitea: looks okay.

[silverwind]

Not sure if it's a good idea to alter browser styles like that (some browser might want render strikethrough lines differently), but I'd do a slight variation (perfect centering and line does not interfere with clicks):

strike {
  text-decoration: none;
  position: relative;
}

strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.5px);
  height: 1px;
  background: currentcolor;
  pointer-events: none;
}

Probably stuff for another PR.

[silverwind]

Also, that method would break on wrapped lines, so I don't think it's a good idea.

[CL-Jeremy]

Also, that method would break on wrapped lines

See my updated comment. There are some tests to be done there.

[silverwind]

You can probably never perfectly immidate browser strikethrough styles because the spec does not dictate them to be pixel-perfect so this will always be kind of a hack.

[silverwind]

FWIW, one can also not strikethrough GitHub's images: . ❤️ ❤️

[CL-Jeremy]

Confirmed to be Chromium-specific. Firefox looks perfect (my suggested imitation resembles the graphical rendering of Chromium though, not Firefox).

  top: calc(50% - 0.5px);

In your variation it should be calc(50% + 0.5px)

Edit: by Chromium-specific I mean the fact Firefox strikes through the entire <strike></strike> as if it were a span, while Chromium seems to apply text-decoration: line-through to each level inside the tag, creating the visual glitch. The glitch also changes as text gets resampled while zooming in and out. There isn't a good solution to that for now.

[techknowlogick]

🚀