0

私の Sphinx プロジェクトは、コード フォント インラインを使用するドキュメントの HTML を生成します。私が使用しているテキスト フォントは Lato です。コードのフォントは Consolas です。

問題は、ドキュメントがテキスト フォントからインライン コードに移行するたびに、Sphinx によって余分なスペースが挿入されることです。テキストがどのように表示されるか (別のアプリケーションでシミュレート) と実際の表示のスナップショットを次に示します。

ここに画像の説明を入力

ここに画像の説明を入力

この問題は、行頭のコードで特に顕著です。余分なスペースにより、その行はインデントされているように見えます:

ここに画像の説明を入力

Sphinx は、前後の単語をコード フォントで構成する HTML を生成しているように見えますが、そうではありません。

ここに画像の説明を入力

私が使用する別の作成ツールは、同様の HTML を生成しますが、これを行いません。

ここに画像の説明を入力

ここに画像の説明を入力

プロジェクトのスタイル シートが、フォント シフトの前後にスペースを追加するプロパティを Consolas フォントに与えていると思いますが、スタイル シートまたはブラウザーの HTML インスペクターでそれを見つけることができません。実際、それを行うことができる HTML のプロパティを見つけることができません。何を探すべきですか?


後で -- これは Steve Piercy のコメントに対する応答です。コメントにグラフィックを挿入できないため、元のメッセージを編集しています。

Steve から、再現可能なサンプルを添付するように依頼されました。プロジェクトのいくつかの部分 (コンテンツだけでなく、テーマ、つまりインフラストラクチャ) は独自のものであるため、難しいと思います。スタイル シートをテーマから分離し、それらを使用して「クリーンな」テーマで問題を示すことができるはずですが、そのためにはテーマについてさらに学ぶ必要があります。そのための時間を見つけるだけでも、しばらく時間がかかりそうです。

別の方法として、出力、HTML、およびブラウザーの HTML インスペクターから適用可能なスタイルのセット全体のスナップショットを添付しています。関連するすべての情報がそこにあるはずです。

ディスプレイ:

ディスプレイ

それを生成した HTML:

それを生成した HTML

スタイル (1/5)

スタイル (1/5)

(2/5)

(2/5)

(3/5)

(3/5)

(4/5)

(4/5)

(5/5)

(5/5)

11/29 の Steve Piercy への返信:

Steve の 11/29 の提案に従い、以下を見ました。

インライン コードの場合:

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;

関連する可能性のある唯一のプロパティは、インライン コードの box-sizing と body 型の margin-right です。両方を (それぞれ content-box と 0 に) 変更しようとしましたが、効果はありませんでした。

12 月 5 日: Steve Piercy は次のように書いています。

敬意を表して、私はそのようなものは何も見ません。インライン コードの一部を選択し、属性スタックを何度か上下にスクロールしました。margin 属性が見つからない場合は、全体をコピーしてテキスト エディターに貼り付け、"margin" を検索しました。例はありませんでした。

コード インスペクターの右側の列の内容全体を次に示します (まだインライン コードの一部が選択されています)。

ここに画像の説明を入力

4

1 に答える 1

0

問題が見つかったことをお知らせするためのメモです。インライン コードをラップする <span> タグにはパディングがありませんが、2 レベル上の別のタグにはパディングがありました。そのタグを「padding: 2px 5px;」から変更しました。「パディング: 2px 0;」に そして問題は解決しました。

皆様のご尽力に感謝いたします。あなたは本当に役に立ちました。独自のコンテンツなしでアップロードできる完全な HTML サンプルを単純化しようとしているときに、問題を見つけただけです。

于 2021-12-29T19:25:17.507 に答える