思った以上に検索で見つかる数が少ないので自分なりにまとめました。
自分が作ってみたいモノはできましたが、ちょっと厄介な部分もあります。
■Webで縦書き表示するJquery「tategumi.js」
いくつか使ってみましたが、自分がしたいことに合致しているものを選びましょう。
今回はフォントが自由に使えるタイプのJqueryを優先しました。
Jquery「tategumi.js」
大体はデモファイルを見るとわかる。
今回は「demo-jquery.html」の方を参考にしました。
日本語で説明が書かれているのでわかりやすいです。
GitHub – allianceport/tategumi.js
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tategumi.js" charset="utf-8"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('#target').Tategumi({
styles: [ //target element IDを指定
{ selector:'#midashi',
style:{ glyphSize:30, //級数（px）
glyphsPerLine:15, //行文字数（個）
lineMargin:18, //行間（px）
glyphMargin:0, //字間（px）
blockMargin:0 //段間（px）
}
},
{ selector:'.default',
style:{ glyphSize:24, //級数（px）
glyphsPerLine:32, //行文字数（個）
lineMargin:18, //行間（px）
glyphMargin:0, //字間（px）
blockMargin:100 //段間（px）
}
},
{ selector:'.caption',
style:{ glyphSize:13, //級数（px）
glyphsPerLine:40, //行文字数（個）
lineMargin:10, //行間（px）
glyphMargin:0, //字間（px）
blockMargin:0 //段間（px）
}
}
],
apply: true
});
});
</script>
head内に上記をコピペして編集してください。
例だと#target内を縦書き表示します。
#midashiはそのまま見出し、.defaultは指定していない部分全て、.captionは出典？です。
この辺りは一度アップロードしてjavascriptと実際の表示を見ながら編集するとやりやすいと思います。
その他、組み合わせ、注意すること
tategumi.jsは文章ごとにpで区切って、表示する際にはspanで区切って半角スペースが入る形です。
縦書きはSEO的にはダメ、みたいな事を聞きますが、tategumi.jsもダメかもしれませんね。
spanだから違うのかもしれませんが、その辺りは調べていません。
この仕様によって他のJqueryが使いにくくなったりします。
タイプライター風にテキストを1文字ずつ表示する「t.js」を組み合わせてみましたが、
1文字ずつの表示は可能でしたが、カーソルの点滅ができませんでした。
スマホでも動作の確認はできましたが、Androidの独自ブラウザだと正常に動作しませんのでご注意を。
t.js — jQuery.Typewriter with nice features like HTML support
他のWebで縦書きをする方法
リストやテーブルに対応していますが、フォントが明朝系かゴシック系のみしか選べない仕様？
後は単純に分かりにくかった。
日本人が開発している？もののバージョンが色々あったり、デモが動作しなかったり、デモを見てもさっぱりだったので自分がダメでした。
今回作りたかったモノ
元ネタみたいなことをしたかっただけなのでこれで終了。これのいいところは画像を1枚も使っていないところ。 pic.twitter.com/ShTSJV4ndr
— makoto (@makoto20142) 2017年6月16日
某小説家のWebサイトみたいなモノが作りたかったんです。
原稿用紙みたいな背景はcssで表示しているので画像は使っていません。
その代わりにテキストと一緒に原稿用紙の枠が表示されるという欠陥があります。
動画内では「tategumi.js」と「t.js」の組み合わせ+Webフォントを使っています。
ですがWebフォントが長音「ー」が対応していなくて、縦棒「｜」を使っています。
上記は色々な部分をcssで調整しているので通常のWebサイトでの利用は難しそう。
単純に縦書き表示+1文字ずつの表示なら簡単だと思います。
日本人には親しみやすいと思うのでどこかで利用することもあると思います。
その時はフォントにも凝ると面白いかもしれません。
コメント