縦書きデザインコンテスト『縦書きWebデザインアワード』 | phiary が開催中ということで, 縦書きでテキスト編集できる簡易エディタを作ってみました.

Runstant

フォーカスすると文字を入力できるのが分かるかと思います. 左下のボタンを押すと alert で入力内容を表示します.

入力候補がカーソルと被っちゃうのが難点...

Code

HTML

<div id='editor' class='editor' contenteditable="true">  
  吾輩は猫である。...
</div>  
<button class='btn' id='btn-show'>表<br />示</button>  

CSS

.editor {
  width: 100%;
  height: 100%;
  padding: 2rem;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background-color: white;
}

.btn {
  position: fixed;
  left: 15px;
  bottom: 15px;
}

JavaScript

window.onload = function() {  
  var editor = document.getElementById('editor');
  var btnShow = document.getElementById('btn-show');

  btnShow.onclick = function() {
    alert(editor.innerHTML);
  };
};

Tips

CSS で指定するだけで縦書き対応させることができる writing-mode: vertical-rl; プロパティ.
実はこれ, textarea では効きません.

なので今回は, 要素に contenteditable=true 属性を付けることで編集可能にし, その要素に対して

  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

を指定することで縦書きのテキストエリアを実現しました.

そのため値の取得方法は, elm.value ではなく elm.innerHMTL もしくは elm. textContent を参照する形になります.

btnShow.onclick = function() {  
  alert(editor.innerHTML);
};