竹取JSの印刷について

こんばんは。ご質問ありがとうございます。

さてご質問の件ですが、印刷のために一度縦書きと横書きを切り替えるボタンを作られる(公式ページの解説を参考にしてください)か、以下をお試しください。

こちらで印刷を試した訳ではないのでうまくいくかどうかわかりませんが、参考になりましたら幸いです。

▽taketori.js 171-180行目を以下のように変更

if (header) {
 var link;
 link = document.createElement('link');
 link.setAttribute('rel','stylesheet');
 link.setAttribute('type','text/css');
 link.setAttribute('media','screen');
 link.setAttribute('href',this.config.cssPath + 'taketori.css');
 header.appendChild(link);
} else {
 document.write('<link rel="stylesheet" media="screen" type="text/css" href="' + this.config.cssPath + 'taketori.css" />');
}

縦書きのための CSS 読み込みに media="screen" をつけています。

いずれにしましても、taketori.js は span タグをあちこちに挿入しますので、印刷時になんらかの悪影響を及ぼすかもしれません。

できましたら、また結果を教えてください。お待ちしておりますm(_ _)m。

返信ありがとうございます。

教えていただいたtaketori.jsの一部を変更すると、taketori.cssの読み込みが印刷時に影響しないことを確認しました。

また、縦書きから横書きに切り替えるときれいに出力できるのも確認しました。

しかしtaketori.jsで生成される<div class="taketori-col">で直接指定されているプロパティや、今回制作しているページのもともとのHTML・CSSの構造が影響しているのか、いろいろと試してみたのですがうまくいかず・・・。
今回は横書きの印刷用のページを用意することにしました。

アドバイスいただきありがとうございました。

ちなみに・・・
横書きじゃないと出力できないのかな？と思い込んでいましたが、文字量が少なければ縦書きのままでも出力できそうな感じでした。
文字量が多いと縦書き領域の一部だけが縦書きで表示されていました。（インラインフレームのような感じです）
いろいろと勉強になりました。

教えていただいたtaketori.jsの一部を変 更すると、taketori.cssの読み込みが印刷時に影響しないことを確認しました。

ご報告ありがとうございます。たいへん参考になりました。

やはり、taketori.js が挿入するタグが印刷を乱してしまったようで残念です。。。

また何かありましたら、ぜひご指摘ください。お待ちしておりますm(_ _)m。