Inline Code Block Handling Issue in Chromium-Based Browsers

[WellWells]

Dear Owner,

Regarding the handling of inline code blocks, I’ve encountered an issue specifically in Microsoft Edge. When translating, it moves all <code> tags to the end of the paragraph, causing formatting disruptions and readability challenges.

After testing, I found that wrapping <code> tags with <span> resolves the issue, allowing proper parsing and translation.

This issue seems to stem from the browser itself. Notably, it does not occur in Safari. Initially, I thought this was limited to Edge, but further investigation revealed that all Chromium-based browsers exhibit this behavior when processing <code> tags. They tend to move these tags to the end of the text block during translation.

Interestingly, this bug appears to have existed since 2020 (or perhaps even earlier), as documented in the following references:

1. Edge's built-in translation breaks typography

2. The translator always move the code tag content to the end

As a workaround, adding <span> tags around the <code> blocks has proven to be an effective solution. While not ideal, it ensures readability and proper translation behavior across affected browsers. I hope this insight can help others encountering the same issue.

Best regards,
Wells

[WellWells]

The demo page is shown below as an example:

Original Page:

Chrome Rendering

Edge Rendering

After wrapping the inline code block with a tag, the updated rendering is as follows:

Chrome does not always render successfully. For instance, on the Mozilla Developer page, the rendering fails: MDN Documentation: <span> Element

The issue can be resolved by wrapping the <code> tag within a <span> tag.

[CaiJimmy]

Thanks for reporting this!

Hugo does not provide a render hook for the inline code block, so the only way to fix this would be via Javascript (which may cause layout shift) or regex replacement. Both are pretty bad solutions. I really hope Edge fixes this bug themselves.