gutchom/verticalize.html

## verticalize.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Verticalizer</title>
</head>
<body>
  <form>
    <textarea id="source" cols="40" rows="16">
縦書きの
ツイート作るよ
最上川

字面合わせに
全角スペースで埋めるので
実字数は増えます</textarea>
    <br>
    <button id="convert" type="button">縦書きにする</button>
    <br>
    <output id="result"></output>
  </form>

  <script>
    convert.onclick = e => result.innerHTML = source.value
      .split('\n')
      .reduce((lines, line) => [...lines, [...line.padEnd(lines.length && lines[lines.length - 1].length, '\u3000')]], [])
      .reduceRight((lines, line) => lines.map((char, index) => index < line.length ? char + line[index] : char))
      .join('<br>')
      .replace(/ー/g, ' | ')
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Verticalizer</title>
	</head>
	<body>
	<form>
	<textarea id="source" cols="40" rows="16">
	縦書きの
	ツイート作るよ
	最上川

	字面合わせに
	全角スペースで埋めるので
	実字数は増えます</textarea>
	<br>
	<button id="convert" type="button">縦書きにする</button>
	<br>
	<output id="result"></output>
	</form>

	<script>
	convert.onclick = e => result.innerHTML = source.value
	.split('\n')
	.reduce((lines, line) => [...lines, [...line.padEnd(lines.length && lines[lines.length - 1].length, '\u3000')]], [])
	.reduceRight((lines, line) => lines.map((char, index) => index < line.length ? char + line[index] : char))
	.join('<br>')
	.replace(/ー/g, ' \| ')
	</script>
	</body>
	</html>