My Sphinx project generates HTML for a document that uses code font inline. The text font I'm using is Lato; the code font is Consolas.
The problem is that wherever the document shifts from the text font to inline code, Sphinx inserts extra space. Here's a snapshot of how the text should look (simulated in another application) and how it actually looks:
The problem is particularly obvious with code at the beginning of a line. The extra space makes that line appear to be indented:
It looks like Sphinx is generating HTML that composes the preceding and following words in code font, but it's not:
Another composing tool I use does not do this, although it generates similar HTML:
I assume that the project's style sheet is giving the Consolas font some property that adds space before and after a font shift, but I can't find it in the style sheet or the browser's HTML inspector. Actually, I can't find a property in HTML that could do that. What should I look for?
Later -- this is a response to Steve Piercy's comment. I'm editing the original message because I can't insert graphics in a comment.
Steve asked me to attach a reproducible sample. I'm afraid that will be difficult because some parts of the project (the theme, i.e. the infrastructure, not just the content) are proprietary. I should be able to separate the style sheets from the theme and use them to demonstrate the problem in a "clean" theme, but to do that I'll need to learn more about themes. It's likely to take a while just to find time for that.
As an alternate approach, I'm attaching snapshots of the output, the HTML, and the entire set of applicable styles from the browser's HTML inspector. All of the relevant information should be there.
The display:
The HTML that generated it:
The styles (1 of 5)
(2 of 5)
(3 of 5)
(4 of 5)
(5 of 5)
Response to Steve Piercy, 11/29:
I followed Steve's 11/29 suggestion and saw the following.
For a piece of inline code:
border-collapse: collapse;
border-spacing: 0px 0px;
box-sizing: border-box;
color: rgb(0, 0, 0);
empty-cells: show;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
font-size: 13.9333px;
font-weight: 500;
line-height: 17.6px;
text-align: left;
white-space: nowrap;
For the enclosing body type:
border-collapse: collapse;
border-spacing: 0px 0px;
box-sizing: border-box;
color: rgb(0, 0, 0);
empty-cells: show;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14.6667px;
font-weight: 400;
line-height: 17.6px;
margin-bottom: 5.86667px;
margin-left: 0px;
margin-right: 5px;
margin-top: 10.2667px;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
white-space: normal;
The only possibly relevant properties I see are box-sizing in the inline code, and margin-right in the body type. I tried changing both (to content-box and 0 respectively), but that had no effect.
December 5: Steve Piercy wrote, "You're getting closer. I see 4 margin-* attributes that you can inspect and override."
With respect, I don't see anything of the sort. I selected a piece of inline code and scrolled up and down the attribute stack several times, and when I couldn't find the margin attributes I copied and pasted the whole thing into a text editor and searched for "margin". There were no instances.
Here is the entire contents of the code inspector's right hand column (still with a piece of inline code selected):
Just a note to let you know that I found the problem. The <span> tag that wraps inline code does not have padding, but another tag -- two levels further up -- did! I changed that tag from "padding: 2px 5px;" to "padding: 2px 0;" and the problem resolved.
Thanks to everyone for your efforts to help. You really did help; I only found the problem while trying to simplify a complete HTML sample that i could upload without proprietary content.