牛耕式ビューワー

ブログを取得したドメインに移行したいけど何もできてない。。。

牛耕式?

先日こんなツイートで牛耕式というのを知った。

牛耕式文章とは、簡単に説明すると読む方向を左、右、左、右と1行ごとに変え、右から読む列は文字自体も反転して鏡文字になっている文章のこと。

牛耕式 - Wikipedia

慣れたら早く読めるかも!というの気になったので試してみたいと思って作ってみた。

牛耕式ビューワー

作ってみた感想

なんだろう。。。思ったより読みづらい。ツイートの画像はきれいに読めるのに。
思うに、一行が長いのでスラスラ慣れが必要だと思う。あとフォントが小さめだったり文章自体が長かったり文字自体が小さかったりしている。ツイートの画像は文章量が少ないからそれなりに読める気分になっているかも。
あと、英語は対称にすると b, d とか p q とかがマヂ無理なので結構向かないかも。日本語も ちとさ に問題があるけど、英語ほど辛くは無い気がする。結局なれかも。

実装とか

実装の要点は、一行を 1 div に収めること。1div に収まれば、その div を transform: rotateY(180deg); することで反転できます。それを1行ごとに交互にするだけ。

1行1div に収めるには、文字を足したり減らしたりして高さが変わるところで一行としてました。
イメージ的には

var text = "this is a pen.";
var dom = new Div();
var index = 0;
while (height(dom) < 2行分の高さ) {
  dom.text += text[i++];
}
// 一文字余計なので、dom.text から一文字消す

くわしくは
GitHub - ororog/vue-boustrophedon


ついでなので新しい技術をいくつか試していて、 github.io を使って静的ページを公開してみたり、vue + vuetifyjs をつかってた。dom の操作は jquery を使っているけど、せっかくなので jquery を使わないで書きたい。その場合普通に js 書くのかな? vue でオブジェクトを変更して、オブジェクトに連動して view が変わるのが正当な使い方だと思うけど、今回のように dom を操作したい場合なにでやるのがいいのかな?