<code>要素での改行を防ぐ

このウェブサイトの、私が気に入っている小さなディテールの1つは、ノンブレークスペース（改行されないスペース）です。 私は、「5 cm」、「New York」、または「Objective‑C」のようなフレーズを探し、ノンブレークスペース/ハイフンを挿入して、それらが複数の行に分割されないようにしています。 これは、印刷された固定レイアウトの本を書いているならプロの組版者が処理するような、タイポグラフィ上の配慮ですが、ウェブサイトはそうではありません。 私のウェブサイトはさまざまなサイズで表示され、ブラウザはどこで改行するかを選択します。 私はこれらのノンブレーク文字を追加して、ブラウザが不格好な改行を避けるようにしています。 以前は本文テキストにのみこのディテールを適用していましたが、今日、<code>要素にも同様のものを実装しました。 私は前回の投稿で多くのインラインコードスニペットを使用しましたが、それをレビューしているときに、それらのスニペットのいくつかに役に立たない改行があることに気づきました。 たとえば、(?-u:…) は (?- と u:… に分割され、フラグ --multiline は - を1行目に、-multiline を2行目に分割されました。 これらの改行は、メリットなしに投稿を読みにくくします。 それらが発生した理由は理解できます – ブラウザは改行できる文字を探し、英語ではハイフンも含まれます。 ハイフンでつながれた単語を複数行に分割することは通常問題ありませんが、コードでそれが起こると迷惑です。 私の<code>内のハイフンをノンブレークハイフンに置き換えることでこれを修正できますが、人々はコードスニペットをコピー/ペーストするため、意味が変わってしまう可能性があります。 代わりに、<code>要素を検索し、短いもので改行文字が含まれている場合に、nowrap CSSクラスを追加するチェックを作成しました。 import re def add_nowrap(match: re.Match[str]) -> str: """ 改行文字を含む `<code>` 要素に `nowrap` クラスを追加します。 """ contents = match.group("contents") if "-" in contents or " " in contents: return f"<code class=\"nowrap\">{contents}</code>" return match.group(0) text: str # 短くて改行文字を含む `<code>` スニペットに `nowrap` クラスを追加します。 # # 15文字の制限は任意です。より長いコードスニペットでは、 # 前の行に過剰な空白を残さないように、折り返しが好ましいです。 text = re.sub(r"<code>(?P<contents>[^<]{1,15})</code>", add_nowrap, text) これは、ブラウザに折り返しをしないように指示する `text-wrap` プロパティを使用するCSSルールと組み合わされています。 code.nowrap { text-wrap: nowrap; } これは必須ではありませんでしたが、サイトが少し良くなったと思います。