超段組で作成の文字ずれの対応

質問

文字サイズを大にすると下記写真の表示されますが何か対策がありますか。
写真の上が文字サイズを大です。下が文字サイズを中です。

.up {font-size:0.82em;vertical-align:super;}
.wmx {width:57em;clear:both;}
.s05 {margin-left:5em;}
.l03 {width:3em;float:left;}
.l08 {width:8em;float:left;}
.l18 {width:18em;float:left;}
.l20 {width:20em;float:left;}
.s009 {margin-left:0.9em;}
.rz {font:0.9em/110% "ＭＳ 明朝",serif;letter-spacing:0.1em;}
.m_f {margin-top:0.3em;}
.rt {font:0.71em/100% "ＭＳ 明朝",serif;}
.c_b {clear:both;}
.mtf {margin-top:0.2em;}

<div class="wmx">　駿州庵原郡樽の上村、武田甚右エ門の子に、兄に左次右エ門、弟に権兵衛といふ者あり、かの権兵衛２５の年、<span class="up">(今より)</span>３
<div class="s05 l18"><div class="s009 rz">辛 未</div></div><div class="s009 l08"><div class="rz">狩り</div></div></div><div class="l20"><div class="m_f rt">けんぞくかえ</div></div><div class="l03"><div class="m_f rt">しし</div></div>
<div class="c_b">０年以前、かのとひつじの年正月１７日に、竜爪山に殺生に出て、我が眷 属 鹿のしし１６匹連れて遊びゐる中に、鹿の額白く</div>
<div class="c_b"><div class="mtf">背筋同じく白房の如くなるを、<span class="up">(彼の者が)</span>鉄砲にて撃ちとむる。それによって我、彼の者に乗り移る。<span class="up">(その結果彼の者は)</span>言葉乱</div>

超段組で作成の文字ずれの対応方法を教えて下さい

http://ryuso.info/rk/rk275_277.htm

回答No.1

naokita

そもそもHTMLの段階で適正ではありません。

JS,CSSを非表示にしてHTMLレベルで確認しましょう。
それで、
文章や言葉が読めるようにしてから、CSSで装飾します。

残念ですが、
小学生が足し算を覚える前に掛け算を使っているような感じです・・・

例えば、ガラケー携帯で読んだり、
全般部分をHTMLで読むと、
-----------------
　駿州庵原郡樽の上村、武田甚右エ門の子に、兄に左次右エ門、弟に権兵衛といふ者あり、かの権兵衛２５の年、(今より)３
辛 未
狩り
けんぞくかえ
しし
０年以前、
------------------
このようになり、全く文章になっていません・・・

つまり、
見え方や改行が云々よりも、まずはHTMLで多くの環境で読めるよう
まずは、基本のHTMLを勉強して下さい。

文章は、
<div>ではなく段落の意味で、<p>で文章単位の段落を形成します（囲います）。
その<p>段落内では、
あくまで“基本的”にはですが、文章の途中で改行しません。

お礼

回答ありがとうございます

すいません　フレーム分割のみ発生します

ルビをサポートしていないMAXブラザーでも表示できるように作成されています。

段組の作成を<p>で作成するのですか

対策として１行の文字数を減らすか　縦書きサポートしていないMAXブラザーで表示方法で作成か迷っていましてので質問してみました。