問題タブ [word-spacing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
18 参照

html - このような状況で単語間隔を使用するにはどうすればよいですか?

カスタマイズ、デザイン、計画、私たちについてのテキストを分けたいのですが、単語間隔を使用すると、私たちについての間のスペースも大きくなります。span を使用してみましたが、正しく使用しているかどうかわかりません。

0 投票する
1 に答える
82 参照

html - インライン コード周辺の余分なワードスペースの原因

私の 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 の提案に従い、以下を見ました。

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

囲んでいるボディ タイプの場合:

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

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

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

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

ここに画像の説明を入力