I’m working on formatting the CSS of an ebook in Calibre for export to PDF for publishing. I’ve formatted everything perfectly, but run into an issue.

The body of the text is a paragraph style definition where I’ve applied full text justification using text-align: justify; to make it easier on the eyes when being printed. The software then adjusts spacing between each word to justify it properly.

The problem I’ve run into is that I have reference markers scattered throughout the text which are represented by a number. I’ve created a span style for those to display them in a different color. When justifying, in certain places, the text is rendered with massive space between the previous/next word and the reference marker number. For example, it may look like this:

word  anotherword shortword     2  longerword   word  

Here are the relevant CSS stylesheet definitions:

p.Body-Text {
  -epub-text-align-last: left;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  orphans: 1;
  text-align: justify;
  text-indent: 1.5em;
  line-height: 1.2;
}

span.Numeral {
  color: #7f7f7f;
  font-size: 0.75em;
  vertical-align: text-top;
}

And here is a sample HTML segment using the above definitions:

<p class="Body-Text"><span class="Numeral">1 </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="Numeral">2 </span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="Numeral">3 </span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="Numeral">4 </span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I’ve attempted adding display: inline-block to the “Numeral” span definition and that has not addressed the issue, so it is not included in the above snippets.

By way of a clarification, the issue here is the additional spaces that are added between the span tag’s contents and the remaining paragraph text.

Is there anything that can be done either in the span style definition or the parent paragraph style definition to force there to be a single space both before and after the span style for the number marker?

Thanks.