竹取ｊｓの高さ幅調整について困っています。

情多説明のために、画像を載せます。
現在、こういう状態です。
上のナビゲーションバーとパンくずリスト・ページャが取っている縦幅　高さ分　縦書きで表現した部分が、下がっています。
横スクロールで　下スクロールがみえるまで引き上げると、そうだとわかりました。

これを、ナビゲーションバーとパンくずリスト・ページャの画面を消さずに、残りの画面幅で、縦書きを表現したいのですが、難しいのでしょうか？

ご質問ありがとうございます。

竹取JSにはウィンドウ高さに合わせて、スクロールバーが見えるよう縦書き領域の高さを調節する機能があります。（もしこの機能が正常に動作していないとなると何らかの理由でウィンドウサイズを正しく取得できていないものと思われます。）

ご指摘の設定の場合、.set({fontFamily:'sans-serif',togglable:true}) としても、縦書き化できるのではないかと思います。

高さを指定する height は全て小文字ですのでご注意ください。ちなみに、maxHeight 指定の場合、ウィンドウ高さに合わせて高さを調整しますので、こちらの方がおすすめです。true は真偽値なので引用符は不要です。

以上参考になりましたら幸いです。

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

長文でしたので、うまくニュアンスが伝わらなかったかと思い、再度画像をアップしてお伝えいたします。
ウィンドウ高さに合わせて、縦スクロールを表示できることは知っています。
それは必要ないので、gap値を、０．５ほど入れて「消しています」

困っているのは、「ブラウザによって、横スクロール操作が違う」という点です。

safari5.7.1画面上で、デバイス設定を「iphoneG5」に合わせると、縦書き部分の操作を、どのようにすればよいのか？わかりません。手元にiphoneが無く、タッチパネルでの横スクロール操作「二本指で横になぞる操作」が、ｐｃ上でテストできないので、困っていました。
それで、この操作を知らない人にも操作しやすいように、「横スクロールを表示」させたかったのです。

chromeでも表示確認してみました。デバイス設定を「iphoneG5」と「ipad」に変えて、縦書き部分を確認しましたが、

どちらのブラウザ上でも、横スクロールが見える範囲まで下げると「縦書きの文面が、デバイス画面縦幅きっちりに収まってる状態」でした。

こういう状態です。

現在、横スクロールを無視して、gap値のみで、iphone ipad画面上に、きっちりおさまるように縦書は表現できます。

そのときの設定値は、こうしています。
//<![CDATA[
(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif',maxHeight:'17em'|'px',multiColumnEnabled:'false',
gap:'5.5em',togglable:'true'}).element('tate').toVertical();
//]]>
＊heightのアドバイスありがとうございます。アドバイスの通り書き直したのですが、うまく作動しなくて、元の状態にしました。それが、上の記述です。

これは、完全に　横スクロールを無視した設定なので、iphone ipad 普通のPC上では、横スクロールは、見えません。
PCからでは、横スクロールが見えなくても縦書き画面を普通にスクロールすれば横にスライドするので読めるのですが、

iphone ipad では、縦書き画面にタッチして、どのようにすれば「横スライド」できるのか？想像できません。
縦書きが表現出来ても、左の奥にある文章に読み進めない。となれば、縦書きをあきらめるよりないです。

それで、せめて　横スクロールバーが表示できたら…と思いました。

もしも、横スクロールバーが画面に表示されていなくても、縦書き画面に　タッチしただけで、横スクロールが「スライドするように可能なら」

横スクロールバーを表示させる必要性はなくなります。
竹取ｊｓでは、タッチパネル式の画面では、どのように、「横スライドを再現」されてるんでしょうか？
よろしくお願いいたします。

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

iPhone/iPadでは画面をドラッグすると横移動すると思いますが、しないのでしょうか？？　タッチしただけではスライドしません。通常の画面操作と同じです。

http://taketori.org/js.html

↑こちらで操作できるのに、ご自身のサイトで動かないということでしたら、竹取JS以外のJavaScriptが干渉している可能性があります。

今気がつきましたが、「'17em'|'px'」とあるところは、「'17em'」としてください。解説にあるのは、em指定かpx指定で、という意味ですので、どちらかで指定します。

横へのドラッグ移動は、縦書き状態になっている画面の「どの場所をタッチ」しても、その後ドラッグして、横へ読み進めることが出来るのでしょうか？
要するに、横スクロールバーが下に隠れていようと、画面のどこをタッチしても、その後ドラッグして横へ移動出来るのかどうか？解りません。

この質問をしたのには、理由があります。

私は、ipad iphoneで、主に使用されるブラウザを、safariか？chromeか？で限定して表示確認しています。

現在、最新の　safari5.7.1とchrome win版を、windows7proに導入して
ipad iphone での表示確認をそれぞれで確かめながら縦書きサイトの体裁を整えています。

しかし、横スクロールが表示されない画面に、ｐｃ画面上からのクリックをほどこして、画面ドラッグしても横移動はしません。

しかも、safariでは、縦書き部分が横倒しになります。
なので、chromeを主体に表示確認と動作確認をしています。

chromeでは、横スクロールさせる場合、横スクロールバーが表示されているところにマウスポインタを持って行っただけで、横へスライドされます。

ですが、横スクロールバーが表示されていなければ、画面のどこをマウスポンタでタッチしても、縦書き画面は横にスライドしませんでした。
これは、PC上だからであって、ipad iphoneでは、横スクロールが表示されてなくても、画面をタッチしドラッグすれば横移動可能であるのか？わかりません。

あくまで、pc上にインストールされたchromeブラウザ画面上に再現したipad iphone画面上での現象が、
「横スクロールバーが表示されていれば、そこにマウスポインタを移動すれば、横にスライドする。ないし、ドラッグすれば、同じようにスライドする」
という状況です。

これが、ipad iphone にインストールされたchrome起動画面内では、どのように動作が生じるのか？
ｐｃ上で再現した画面のように、同じ現象が生じるのか？
わかりません。

横スクロールバーがなければ、タッチしドラッグし横移動できないのか？
そこが、とても不安なのです。
ｐｃ画面上で擬似的にipad iphone画面を再現出来ても「動作までは再現できません」から、困っておりました。

竹取ｊｓの公式サイトも、ｐｃ上で再現した　ipad iphone では、同じように　横スクロールバーにマウスポインタを持って行っただけで横スライドしました。ですが、竹取ｊｓで表現された縦書き表示部のどこをマウスポインタで触れても、その後、ドラッグしても横移動はしませんでした。

そもそも、PC上での動作と　タッチパネルでの操作が違うものなので、疑似画面からでは動作確認の善し悪しは判断出来ないのです。

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

はい、iPhone/iPad では通常どこをタッチしてもドラッグできます。ただし、PC/Mac 版の Safari/Chrome ではこの操作を再現できません。また、iPhone/iPad では必要なとき以外スクロールバーが表示されませんのでスクロールバーに依存した操作は不可能です。

Windows版のSafariは古いため、「＠MS 明朝」以外で横倒しになります。

たいへん申し訳ありませんが、個別環境の動作確認については有償サポートのお申し込みをご検討ください。

以上参考になりましたら幸いです。

//<![CDATA[
(new Taketori()).set({lang:'ja-jp',fontFamily:'sans-serif',maxHeight:'17em',
gap:'5.5em',togglable:true}).element('tate').toVertical();
//]]>
動作確認はしております。動いています。
私のサイトでの竹取jsの動作と

竹取js公式サイト
http://taketori.org/js.htmlでの動作を比較してみました。

動作確認のためにしたこと。
windows7pro上にインストールしたchromeを起動
その後、設定でデバイスを　ipad iphoneを選択

設定値のかけ方の違いがあるので、そこらへんは割愛します。
どちらのサイトでも、同じように動作が確認できたことだけを報告いたします。

やはり、縦書き画面上をクリックしドラッグしても、横にスライドしません。
横スクロールバーを表示させたら、どちらのサイトも横にスライドします。

それ以外では、動作の違いで不服な部分は見当たりませんでした。

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

ご提示いただいたページを手持ちのiPhoneで拝見しましたが、ふつうにドラッグできるようです。

PC上のChrome で iPhone の操作を再現することは不可能ですので、気になるようでしたら、iPhoneをお持ちのご友人に確認をお願いするなどされた方がよいと思います。

やはりそうだったんですね。
でしたら、ニュアンスだけで判断する限り、「横スクロールバーが生じないタッチパッド画面では、竹取ｊｓが適応された縦書き画面では、

横にタッチ＆ドラッグすることで、左へ読み進めるもの

だと理解しました。
ここまで、長文におつきあい下さいまして、ありがとうございます。

返信への確認できず、そのまま書き込んでしまいましたが、返信内容を読んで、安心しました。

これで、横スクロールバーを出さなければいけないという不安から脱します。

心置きなく、執筆に入れます。
助かりました。

竹取ｊｓは、文章量が多いと起動に時間がかかるので、文章量を調整するために、
タクソノミー分類で、タームごとに分けて使用していました。
それで、どうしても、パンくずリストとページャーを消したくありませんでした。
おかげさまで、これで、サイトを崩さずに済みます。

今回は、この大きな不安が取り除けましたので、これにて、失礼致します。
長々とお付き合い下さり助かりました。

ご報告ありがとうございます。
弊社プロダクトがお役に立てましたら幸いです。
今後ともどうぞよろしくお願い申し上げます。