linuxBean14.04(106)Bloggerに貼りつけたIPython Notebookの枠がはみ出る問題を修正

前の関連記事：linuxBean14.04(105)Eclipse4.5.1のPyDevのフォント色を変更する

linuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法でIPython Notebookのセルが右にはみ出ていた原因が横幅を100%にした際、親ボックスからはみ出すのを防ぐ [ホームページ作成] All Aboutにあると思われてとりかかりましたが結局これが原因ではなく、スクロール表示をやめて折り返し表示にすることで解決しました。

Chromeだけ貼り付けたIPython Notebookのセルが右にはみ出る

LibreOffice5(22)ダイアログエディタでGUIを作成しPythonで利用する:その2をChrome　49.0.2623.112 m （Windows7） でみると本文が右にはみ出ています。

Chromium 49.0.2623.108 Ubuntu 14.04(linuxBean14.04)でも同じです。


linuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法を書いた時はちゃんと表示できていたかどうかはよくわかりません。


FireFox 45.02でははみ出ずにスクロールして表示されています。

しかしlinuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法のときと変わらず背景の色の表示がおかしいです。


iOS 9.3.1のSafariではモバイルバージョンでもウェブバージョンでもセル内はすべて折り返して表示されます。
とりあえずChromeのはみ出る状態はカッコ悪いのでこれを修正します。

「width: 100%;」=「余白(margin/padding)」や「枠線(border)」の太さを含んだ幅、に統一

横幅を100%にした際、親ボックスからはみ出すのを防ぐ [ホームページ作成] All AboutによるとCSSの幅指定のときの「余白(margin/padding)」や「枠線(border)」の太さを幅に含むかどうかの解釈の問題のようです。

CSSで「width: 100%;」としたときはその背景の「余白(margin/padding)」や「枠線(border)」の太さを含んだpxが返ってくるために、そのpxが幅に適用されて幅広となってはみ出て表示されるそうです。

対策として「width: 100%;」を削除してデフォルト値の「width: auto;」にしてしまう方法の他にbox-sizing」プロパティに「border-box」を指定してその要素自身の幅に加えて「余白(margin/padding)」や「枠線(border)」の太さを含んだ合計を100%と解釈させる方法が紹介されていました。

まずはlinuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法で作ったIPython Notebookの部分のCSSを見てみます。

IPython notebook.css

整形すると900行近くあります。

まずは「width: 100%;」をデフォルト値の「width: auto;」に変更してみます。

div.cell {
    border: 1px solid transparent;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-width: thin;
    border-style: solid;
    width: 100%;
    padding: 5px;
    margin: 0;
    outline: 0
}

div.output_scroll {
    height: 24em;
    width: 100%;
    overflow: auto;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
    display: block
} 
「width: 100%;」が使われているのは91行目と465行目の2箇所だけでした。

まず91行目の「width: 100%;」を「width: auto;」にしてみました。


Chromeでは右のはみ出しは改善されずIPython Notebookのセルのの背景が文字の長さ分だけに縮んでしまいました。

その代わりFirefoxでスクロールしたセルの背景がちゃんと表示されるようになりました。

今度は465行目だけ「width: 100%;」を「width: auto;」にしてみましたが、これは91行目だけautoに変更した時と同じ結果でした。

ということで「width: 100%;」を「width: auto;」にすることでFirefoxの問題は解決しましたがChromeの問題は解決しませんでした。

「box-sizing」プロパティの「border-box」はすでに適用されており無関係

次に「box-sizing」プロパティを探します。

div.cell {
    border: 1px solid transparent;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-width: thin;
    border-style: solid;
    width: 100%;
    padding: 5px;
    margin: 0;
    outline: 0
}

div.text_cell_render {
    outline: 0;
    resize: none;
    width: inherit;
    border-style: none;
    padding: .5em .5em .5em .4em;
    color: #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

Chromeの要素の検証で調べてみるとdiv.text_cell_renderはシンタックスハイライトされていない入力セルのCSSなので、はみ出ているコードの入力セルは関係ありませんでした。


要素をみていくとbox-sizing: border-box;はすでに適用されていました。

チェックを外してもはみ出ている部分には影響ありませんでした。

ということでbox-sizingは関係ありませんでした。

Firefoxだけにあるdiv.inner_cellのoverflow-x: auto;をChromeにも適用してはみ出る問題は解決

見当が外れたので今度はFirefoxで要素の検証をしてみたところdiv.inner_cellにFirefoxだけ適用されているプロパティを見つけました。

@-moz-document url-prefix() {
    div.inner_cell {
        overflow-x: auto
    }
}

Chromeのdiv.inner_cellにoverflow-x: autoを追加するとセルのはみ出しが改善しました。

@-moz-というのはGechoエンジンだけに適用されるという意味で、url-prefix()で特定のURLから始まるページに限定できるものですが今回は指定されていないのですべてのページに適用されます。

これをChromeにも適用されるように@-moz-document url-prefix()を外しました。

するとChromeもFirefoxと同様にスクロール表示されるようになりました。

iOSのSafariにはoverflowプロパティは影響ないようで、変更前と同じく改行表示されています。

背景色の幅が狭い問題への対応は断念

先ほどdiv.cellのwidth: 100%;をwidth: autoにすれば解決することがわかりましたが、コード以外のセルの背景が短くなってしまったのでコードのセルだけ変更するようにします。

div.code_cell {
}

これにwidth: autoを入れてみましたが解決しません。

そもそもdiv.cellのwidthを100%からautoにしてもダメでした。

背景画像のスクロールについての解説は見つけましたが背景色のスクロールに関する解説は見つけられませんでした。

もうお手上げか、と思いましたがSyntaxHighlighterでは背景色のスクロールができていることを思い出しました。

うーん、SyntaxHiglighterはtableになっているのでまた今回条件と違いますね。

今気が付きましたがlinuxBeanでIPython NotebookをChromeでみてもセルが右にはみ出ていますね。

Firefoxでは正しく表示されています。

linuxBean14.04(78)Jupyter Notebookの内容を直接Bloggerに貼り付ける方法でやったときはChromeでもはみ出ていなかったと思うのですがChromeのバージョンアップでおかしくなってしまったのでしょうか。

あれこれいじるとdiv.cellのflex-direction: column;を無効にするとスクロールしても背景色が一緒についてくることがわかりました。

しかしそうすると全ての入力セルの背景が文字列の長さで終わってしまいます。

文字列があふれたセルだけ適用するのは難しそうなのでこの方法も諦めました。

入力セルはすべて折り返し表示することで2つの問題を同時に解決

もうスクロールは諦めてiOS Safariのように全て折り返して表示するようにします。

html - How do I wrap text in a pre tag? - Stack Overflow

word-wrapプロパティを設定しても折り返し表示されないと思ったらpreタグ内では方法が異なるようです。

div.input_area>div.highlight>pre {
    margin: 0;
    border: none;
    padding: 0;
    background-color: transparent;
    white-space: pre-wrap
}

これだけでセルが右にはみ出る問題と背景色が表示されない問題の2つが同時に解決しました。

iOS Safariはこの変更前から折り返し表示になっていたので変化はありません。

IPython notebook.css

参考にしたサイト

横幅を100%にした際、親ボックスからはみ出すのを防ぐ [ホームページ作成] All About
今回はこれは原因ではありませんでした。

ベンダープレフィックスの順序｜Web Design KOJIKA17
ブラウザごとにCSSを変える方法。

css - What does @-moz-document url-prefix() do? - Stack Overflow
@-moz-document url-prefix()の意味。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
ipynbファイルをnbconvertしたhtmlのCSSではFlexboxが使われていました。

html - How do I wrap text in a pre tag? - Stack Overflow
preタグ内の折り返し表示はword-wrapプロパティではなくwhite-spaceプロパティで指定します。

次の関連記事:linuxBean14.04(107)nvmでnode.jsのインストールができない問題への対応