logiblo

ロジのめもちょうです。本サイトはこちら→https://logica-physica.info/

iOS版のKindleで感嘆符の縦中横が潰れる問題

iOSKindleで「!!」とか「!?」をCSSで縦中横させると潰れるというか、崩れるというか……フォントが寝てしまい、おまけにめっさ小さくなって読めません。
全角でも半角でもです。

ePubからmobi(さらにazk)に変換する前、ふつうはこんな感じで縦中横指定すると思うのですが……、

平成<span class="tcy">27</span>
span.tcy {
	-webkit-text-combine: horizontal;
	-webkit-text-combine-upright: all;
	text-combine-upright: all;
	-epub-text-combine: horizontal;
}

これは感嘆符の横並びには使えない、ということです。

そこで代替策として考えたのが、グリフを使う方法でした。

  • !!の代わりとして、u203c(‼)
  • !?の代わりとして、u2049(⁉)

ほかのデバイスでの表示がもしかしたらおかしくなるかもしれませんが……iOSはシェアも多いし、対策されるまでの対応ということで。

しかし、数字の縦中横はiOS Kindleも対応してるので、CSSの書き方が悪いのかとか、いろいろ調べてやっとのことで辿り着いた答えです……。