ほんの少し前にこんな記事を書きました。

 【日記】現時点のルビ要素とか縦書き要素とかフォントとかの実装について

 で、その続きです。

IE11

 やっぱりダメでした(知ってた)。ベンダープレフィックスをつければ縦書きできるかな……?と思って試したら、一応だけど縦書き表示はできました。けれど、スクロールをしたら崩れました。はい、乙。滅んで。

 

Edge

 ルビ表示、できました。縦書き表示、できました。スクロールしても表示崩れない! やったね!

 はあ。ええ、束の間の喜びでした。

 text-orientation:未対応

 text-combine-upright:未対応

 オワタ。特定文字列(過去記事のフォントに関する部分を参照)の回転に対応できない。オワタ。

 でもね。きっとそのうち対応してくれるよね。信じてるからね。

 

パフォーマンス関連

 ええと。愚痴、なんですけど。

 FireFox、クソですね。クソでした。

 GoogleChromeとEdgeは結構頑張ってるみたいで、40万字オーバーのページでもサクサク動きました。一方のFireFoxは重すぎワロタ。64bit版なんだけどな……。

 

Jquery、というかjs関連

 ChromeとEdgeは扱いやすくなっていました。jsが返す値、的な意味で。Firefoxはクソでした。滅んで?

 まあ、まずは以下を読んで下さい。めんどくさい人は次の項目に飛んでください。説明するので。

writing-mode:vertical-rl指定時に.scrollLeft()から取得する値について

 writing-mode:vertical-rlは、CSS Writing Modes Level 3で追加された日本語などで縦書きレイアウトにしたい際に使う指定です。

 さて、このwriting-mode:vertical-rlを指定した際にjqueryの.position().leftから取得する値は、左側の要素ほど値が0に近くなり、右側の要素ほど値が大きくなります。

 しかし.scrollLeft()が取得する値は異なり、右端にスクロールしている状態の値が0で、左にスクロールするほど値が小さく(つまり、どんどんマイナスの方向に)なっていきます。

 .scrollLeftの取得するべき値が「左側からのスクロール距離」であるなら、この場合の取得される値は「左端にスクロールしている状態の値が0で、右にスクロールするほど値が増えていく」(つまり、writing-mode:vertical-rlを指定していない、通常の状態で取得できる値)であるべきと考えますが、いかがでしょうか。

 以下に記載するものが、最小の再現用セットです。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#box').scroll(function(){
            $('#output').text('scrollLeft: '+$(this).scrollLeft());
        });
    });
    </script>
    <style>
        div#box{
            width:100px;
            height:100px;
            overflow:scroll;
            writing-mode: vertical-rl;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="container">
            <p>Sample Text</p>
            <p>Sample Text</p>
            <p>Sample Text</p>
            <p>Sample Text</p>
            <p>Sample Text</p>
            <p>Sample Text</p>
            <p>Sample Text</p>
        </div>
    </div>
    <p id="output">scrollLeft: </p>
</body>
</html>
どういうことかというと

 .scrollLeft()で取得する値なんですけど、GoogleChromeとEdgeでは「スクロール右端」が数値のMAXで、「スクロール左端」が0なんです。一方のFireFoxは「スクロール右端」が0で、「スクロール左端」がマイナス数値のMAXなんです。-10,000とか出てくる。

 一方で、.position().leftで取得する要素の位置なんですけど。これは全部共通で左端の要素ほど0、右に行くほど数値が大きくなる。

 わかります?

 つまり、ページ内のIDを指定してリンクするやつ。ページ内アンカー。あれめがけて自動スクロールさせるとき、GoogleChromeとEdgeは.position().leftと.scrollLeft()が返す値の基準が同じなので、取れた値をそのまま代入すれば、スクロールさせられるんですよ。

 けどね。Firefoxがね。違うの。.position().leftで取れる値もね、「左端の要素がマイナスのMAXで、右の要素ほど0になる」だったら良かったんです。けど、この基準はChrome・Edgeと同じで、なのに.scrollLeft()の基準は逆なんです。そのまま代入できない。処理する必要があるんです。……めんどくさっ! 最近、というか……だいぶ前から思ってたけど、Firefoxって雑だよね。すごく雑。