1399529 - [Redesign]: The new background-colored <code> text breaks spacing when the <code> is part of a word

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, enhancement)

Description

[Eric Shepherd [:sheppy]]

Currently, extra spacing is being added around the text in <code> to make the background extend outward a bit. This causes problems for text like this:

This is a combination of two compiled <code.WebGLShader</code>s consisting of...

With this, you wind up with the "s" separated out from the word "WebShaders", so it looks more like "WebShader s".

We need a solution for this, since we do this quite frequently. This will also be a problem when doing things like "<code>WebShader</code>'s properties let you control..." or "(when using a <code>WebShader</code>)", where you wind up with "WebShader 's" and "WebShader )".

I just noticed that at least at the moment, these aren't rendering with the background so it's okay, but I see it in local Kuma where the background is still there at the moment pending an update, so I'm filing this in case it affects work being done.

Comment 1

[Eric Shepherd [:sheppy]]

Attachment: Example screenshot

Here's an example screenshot that shows examples of the problem, including the plural "WebShaders", spacing inside parentheses, before apostrophes, etc.

Comment 2

[Eric Shepherd [:sheppy]]

The screenshot came from a page on my local instance of MDN. However, I've created this page that demonstrates several of the cases in which this issue comes up:

https://developer.mozilla.org/en-US/docs/User:Sheppy/Bug1399529

Comment 3

[Eric Shepherd [:sheppy]]

I've started a thread on Discourse to try to find a solution: https://discourse.mozilla.org/t/fixing-code-when-its-part-of-a-word/19554

Comment 4

[Stephanie Hobson [:shobson]]

Improved by https://github.com/mozilla/kuma/pull/4471

Not possible to fix 100% with the tools currently available to us.