ログ日記

作業ログと日記とメモ

CSSでテキストファイルをドラッグして縦書き表示

雑記

パソコンで長文を読むためにはどうするのがいいか考えて、ちょっと書いたのでメモ。


参考：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 : '@メイリオ', '@ＭＳ 明朝' ;
    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>