Блог

Мой проект Sphinx генерирует HTML для документа, в котором используется встроенный шрифт кода. Шрифт текста, который я использую, — Lato; шрифт кода-Consolas.

Проблема в том, что везде, где документ переходит от текстового шрифта к встроенному коду, Sphinx вставляет дополнительное пространство. Вот снимок того, как должен выглядеть текст (смоделированный в другом приложении) и как он выглядит на самом деле:

Проблема особенно очевидна с кодом в начале строки. Из-за дополнительного пространства эта строка выглядит с отступом:

Похоже, что Sphinx генерирует HTML, который составляет предыдущие и следующие слова шрифтом кода, но это не так:

Другой инструмент составления, который я использую, не делает этого, хотя он генерирует аналогичный HTML:

Я предполагаю, что таблица стилей проекта придает шрифту Consolas какое-то свойство, которое добавляет пространство до и после смены шрифта, но я не могу найти его в таблице стилей или в инспекторе HTML браузера. На самом деле, я не могу найти свойство в HTML, которое могло бы это сделать. Что я должен искать?

Позже — это ответ на комментарий Стива Пирси. Я редактирую исходное сообщение, потому что не могу вставить графику в комментарий.

Стив попросил меня приложить воспроизводимый образец. Я боюсь, что это будет сложно, потому что некоторые части проекта (тема, т. Е. инфраструктура, а не только контент) являются собственностью. Я должен уметь отделять таблицы стилей от темы и использовать их для демонстрации проблемы в «чистой» теме, но для этого мне нужно будет больше узнать о темах. Вероятно, потребуется некоторое время, чтобы просто найти для этого время.

В качестве альтернативного подхода я прикрепляю снимки выходных данных, HTML-кода и всего набора применимых стилей из инспектора HTML браузера. Вся соответствующая информация должна быть там.

Дисплей:

HTML, который его сгенерировал:

Стили (1 из 5)

(2 из 5)

(3 из 5)

(4 из 5)

(5 из 5)

Ответ Стиву Пирси, 29.11:

Я последовал предложению Стива от 29.11 и увидел следующее.

Для фрагмента встроенного кода:

 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;
 

Для ограждающего типа кузова:

 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;
 

Единственные, возможно, релевантные свойства, которые я вижу,-это размер полей во встроенном коде и поля справа в типе тела. Я попытался изменить оба (на content-box и 0 соответственно), но это не возымело никакого эффекта.

5 декабря: Стив Пирси написал: «Ты становишься все ближе. Я вижу 4 поля-* атрибуты, которые вы можете проверить и переопределить.»

При всем уважении, я не вижу ничего подобного. Я выбрал фрагмент встроенного кода и несколько раз прокрутил вверх и вниз стек атрибутов, а когда я не смог найти атрибуты полей, я скопировал и вставил все это в текстовый редактор и поискал «поля». Таких случаев не было.

Вот все содержимое правой колонки инспектора кода (по — прежнему с выбранным фрагментом встроенного кода):

Просто записка, чтобы вы знали, что я нашел проблему. <span>Тег, который обертывает встроенный код, не имеет заполнения, но другой тег-двумя уровнями выше-сделал это! Я изменил этот тег с «заполнение: 2px 5px;» на «заполнение: 2px 0;», и проблема решена.

Спасибо всем за ваши усилия по оказанию помощи. Вы действительно помогли; Я обнаружил проблему только при попытке упростить полный образец HTML, который я мог бы загрузить без проприетарного контента.