cssで縦書きにした際、なかぐろ「・」が左にずれる

Question

タイトルに書いた通り、cssで下記の様に縦書き指定をしたさい、画像のようになかぐ「・」が左にずれてしまいます。
検索にもうまく引っかからず、ナレッジある方がいましたらご教授いただきたいです。

//css
test {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
 }

Comments

[m.ts10806]

CSSだけでは再現確認ができませんので、htmlもご提示ください。
ただ「test」というタグはないかと思います。

[new1ro]

本件、フォントによって崩れたり崩れなかったりすると思います。
どのフォントを使用していますか?

Answer 1

本件、フォントによる影響が大きいと考えます。
font-family: serif;などを指定してみても、ズレは生じますか?

フォントが原因でありそうな場合、この箇所だけGoogle フォントの「Noto+Serif」など、Webでよく使われるものを使ってみるか、

どうしてもフォントが優先なのであれば以下のような、無理やりな実装になってしまうと思います。

<div class="test2">
  <span class="rotate">(</span><span>栃</span><span>木</span><span>県</span><span>・</span><span>宇</span><span>都</span><span>宮</span><span>市</span><span class="rotate">)</span><span>の</span><span>温</span><span>泉</span><span>と</span><span class="top-right">、</span>
</div>

.test2 {
  width: 1em;
  display: flex;
  flex-direction: column;
}
.test2 span {
  display: block;
  text-align: center;
}
.test2 .rotate {
  transform: rotate(90deg);
}
.test2 .top-right {
  transform: translate(0.5em, -0.5em);
}

Comments

[hosodaaaaa]

はじめまして。回答頂き誠にありがとうございます。

本件、仕様上フォントを変えることが難しく、上記教えていただいた指定を試したのですが、バグは解消できませんでした。
ただ、半角特殊文字の(mac: option + 8)を入力したところ、バグが解消されたので、一旦は解決しました。

fontによって今回のようなバグが発生するということを知らなかったので、次回から気をつけてwebフォントをなるべく使うようにします。

ご連絡が遅くなってしまいましたが、回答していただいてありがとうございました。
また何かありましたら、ぜひ、よろしくお願いします。

[new1ro]

解決できたようで、よかったです！
少し気になるのは「半角特殊文字の(mac: option + 8)」は、機種依存文字の可能性があるので、Windowsでの確認もしてくださいね。

----
以下のような裏技も最終手段としてあるかもしれない..といま思いついたので
せっかくなのでメモしておきます。
もし、Windowsでうまくいかないということがあれば見てみてください。

<span class="nakaguro">・</span>

.nakaguro {
color: transparent;
display: block;
position: relative;
}
.nakaguro::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: 文字色;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

----
本件に限らず、特殊なシチュエーションを組み合わせるほどバグが出やすくなるので、
その点をおさえておくと危険察知能力が少し上がると思います。

・Webの標準でないフォント (グラフィックでよくつかうものなど) × 縦書き
・table × position × IE11 or Safari or Firefox)
など..

[hosodaaaaa]

なるほど、入力した文字自体をtransparentで透明にして、cssでなかぐろを生成するということですね。
思いつきませんでした。
こちら、windowでも確認してみます。

勉強になりました、ありがとうございます。