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



a year ago
10 months ago


(Reporter: sheppy, Unassigned)





(1 attachment)



a year ago
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

a year ago
Created attachment 8909412 [details]
Example screenshot

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

Comment 2

a year ago
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:


Comment 3

a year ago
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
Improved by https://github.com/mozilla/kuma/pull/4471

Not possible to fix 100% with the tools currently available to us.
Last Resolved: 10 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.