LoginSignup
5
1

More than 5 years have passed since last update.

pugにおける半角の制御

Last updated at Posted at 2018-04-29

pug で長文の日本語を書く場合、半角を制御するために冗長な記法になることがあります。

半角が含まれるケース

p.
  これは改行と改行の間に、
  半角スペースが含まれます。
  句点の前後にもです。
p
  | これは改行と改行の間に、
  | 半角スペースが含まれます。
  | 句点の前後にもです。

この記述は改行の間に半角スペースが含まれる、つまり以下のような出力になります。

<p>これは改行と改行の間に、 半角スペースが含まれます。 句点の前後にもです。</p>

英語圏のことを考えるとこの処理に違和感はないのですが、日本語だと句読点のあとに半角スペースが含まれてしまうのは雑な印象を受けるので避けたいはず。

解決策

p これは改行と改行の間に、半角スペースが含まれます。句点の前後にもです。

この問題の解決策としては改行に含まれる半角スペースを削除し、単純に改行をしなければいいだけです。

ただ基本的に問題のようなことをする場合には、明らかに長いパラグラフを自分の意志で改行制御できない場合に発生しがちで、これを解決策としてしまうのは強引ではあるように思えるのですが、まともな解決策がおそらくこれしかありません。Filters で Markdown を使った記述にすることでも解決できないこともないですが、解決策としてはどっちもどっちのような気がします。

半角が含まれないケース

p
  | これは改行と改行の間に、
  strong 半角スペースが含まれます。
  | 句点の前後にもです。

上記のように要素が挟まっているとその間には半角スペースは生成されません。これはもちろん br を含みます。

ただ逆にこのケースで問題になるのは半角スペースを挿入したい場合です。

解決策

p
  | これは改行と改行の間に、
  |
  strong 半角スペースが含まれます。
  |
  | 句点の前後にもです。

半角スペースが含まれるケースで発生した問題を逆手に取って解決することができます。あるいは以下のように Tag Interpolation で前後に半角スペースを入れてしまうのも手です。

p これは改行と改行の間に、 #[strong 半角スペースが含まれます。] 句点の前後にもです。

参考

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1