サンプル

maxiphorism（世界の名言・金言）

CSS

vartivcal.css

.vertical-text {
    float:right;
    writing-mode: vertical-rl; /* 縦書き、右から左 */
    text-align: top right; /* 文字の水平方向の揃え */
    font-family: '明朝', serif; /* フォントを明朝体に設定 */
    /* 上部に寄せるための追加 */
    height:90%;
    /*display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 縦方向に配置 */
    justify-content: flex-start; /* 上端に揃える */
    overflow-x: auto; /* 横方向にスクロールバーを表示 */
    width: 100%; /* 親要素の幅に合わせて広げる */
}
.number {
    text-orientation: upright; /* 数字を横向きに */
}
td{
    vertical-align: top;
}

JavaScript

int_alphabet_vartivcal.js


//********* この例ではtdを対象としています **********
const tds = document.querySelectorAll('td.main_cont, td.nam');

tds.forEach(td => {
  const textNode = td.childNodes[0];
  //********* テキストノードが存在し、かつテキストが空でない場合 **********
  if (textNode && textNode.nodeType === Node.TEXT_NODE && textNode.nodeValue.trim()) {
    const words = textNode.nodeValue.split(' ');
    const newText = words.map(word => {
      const number = word.replace(/[^a-zA-Z0-9”]/g, '');
      //********* style numberを適用 **********
      return number ? `<span class="number">${word}</span>` : word;
    }).join(' ');
    td.innerHTML = newText;
  }
});

html

sample.htm

<table>
  <tr><td class="main_cont">一羽のツバメが来ても夏にはならないし、一日で夏になることもない。
  このように、一日もしくは短い時間で人は幸福にも幸運にもなりはしない。</td><td class="nam">アリストテレス</td></tr>
  <tr><td class="main_cont">一人ひとりに天の使命があり、その天命を楽しんで生きることが、処世上の第一要件である。</td><td class="nam">渋沢栄一</td></tr>
  <tr><td class="main_cont">明日死ぬかのように生きよ。
  永遠に生きるかのように学べ。</td><td class="nam">ガンジー</td></tr>
  <tr><td class="main_cont">今の時間を大事にできない人は、未来の時間もきっと大事にはできない。</td><td class="nam">平尾誠二</td></tr>
  <tr><td class="main_cont">今日一日をできるだけ利用するのだ。</td><td class="nam">デール・カーネギー</td></tr>
  <tr><td class="main_cont">常識とは十八歳までに身につけた偏見のコレクションのことをいう。</td><td class="nam">アインシュタイン</td></tr>
  <tr><td class="main_cont">国王であれ、農民であれ、家庭に平和を見いだせる者が、もっとも幸せである。</td><td class="nam">ゲーテ</td></tr>
  <tr><td class="main_cont">効率や損得にとらわれると、人間が小さくなる。</td><td class="nam">斎藤茂太</td></tr>
  <tr><td class="main_cont">教育とは、人々が知らないことを教えるのではなく、実例によって道を拓いてやる不断の困難な仕事である。</td><td class="nam">ジョン・ラスキン</td></tr>
  <tr><td class="main_cont">３０センチほどのヤマメと、その倍もあるサクラマスが、もともとは同じ魚　少しずつ努力を重ね、昨日の自分よりちょっとだけでも成長しようと心がける。</td><td class="nam">斎藤茂太</td></tr>
  <tr><td class="main_cont">言葉は選んで使いなさい。
  言葉の選択一つで、人生は明るくも暗くもなるのです。</td><td class="nam">ジョセフ・マーフィー</td></tr>
  <tr><td class="main_cont">速やかに成長するものは早く枯れ、徐々に成長するものは永存する。</td><td class="nam">J・G・ホーランド</td></tr>
  <tr><td class="main_cont">人は無意識の中にも一つの見方に執して、他の見方のあることを忘れがちである。</td><td class="nam">松下幸之助</td></tr>
</table>

なぜ作ったか

「webを縦書きに」のプロジェクトは色々あるのですが数字とアルファベットが横になっていたり複雑に対応しているようだったのでライトに縦書きを実践し自分の好みは　数字とアルファベットは縦！　だったので作成。