パソコンで長文を読むためにはどうするのがいいか考えて、ちょっと書いたのでメモ。
参考:http://cpplover.blogspot.jp/2011/03/css.html http://www.html5rocks.com/ja/tutorials/file/dndfiles/
<!DOCTYPE html> <meta charset=UTF-8 /> <style> html, body { background-color: #a0a0a0; } </style> <div id="area" style="border: 1px solid gray; padding: 1em;">ここにテキストファイルをドラッグ</div> <div style=" column-width: 15em ; column-gap: 2em ; column-rule: thin solid black ; -webkit-column-width: 15em ; -webkit-column-gap: 2em ; -webkit-column-rule: thin solid black ; writing-mode : vertical-rl ; -webkit-writing-mode : vertical-rl ; font-family : '@メイリオ', '@MS 明朝' ; font-size : 16pt ; line-height : 2em ; width: 800px; margin: 1em auto; height: 75%; "> <p id="text" style=" padding: 1em; background-color: #d7d7d7; color: #464646; "></p> </div> <script> function $(a){ return document.getElementById(a); } $('area').ondragover = function(e){ e.preventDefault(); }; $('area').ondrop = function(e){ var f = e.dataTransfer.files[0]; var r = new FileReader(); r.onload = function(e){ $('text').innerHTML = e.target.result.replace(/\n/g, "<br>\n"); }; r.readAsText(f); e.preventDefault(); }; </script>