ウェブページにコードを載せる時に、狭い画面ではそのコードのみが書かれているファイルへの単なるリンク、余裕のある広い画面ではそのファイルの内容をインライン展開するというもの。流行りの感じで言い換えると、レスポンシブ・コード的な何か。
Demo: Link on Mobile, Inline on Desktop
デモはとりあえずな感じなので、幅が800pxかつ高さが600px以上の場合はインライン展開するようにしてみた。当初は簡単にできそうだと思ったのでobject要素を使ってみたが、結局XHRを使うことにした。通常はクロス・オリジンの問題もないので、普通にGETで読んでテキストとして流しこむのみ。インライン展開されない場合はハイパーリンク経由で開かれることになるので、コードのみが書かれているファイルは必ずtext/plainで返すようにサーバー設定を行う必要があることくらいに注意すれば良いはず。
コードの表示というだけならobject要素の方が簡単にできるけど、フォントの設定ができなかったり(CSSが使えない、そして使えるようにすると色々面倒くさい)、幅はともかく高さを適当に定められないとか色々問題ある。汎用的なインライン展開を行いたいならobject要素の方が将来性がありそうだけど、特化型の場合はその限りではなさそう。
狭い画面ではコードのような集中して読まなければならないものは読みにくいというのももちろんあるんだけど、そもそもpre要素のような表示のされ方をするもの自体も狭い画面向きではないという気がする。読みやすくするためのインデントも狭い画面では逆に読みづらくなってしまいがち。折り返しはあるとガタガタが激しすぎて読みづらく、ないと横スクロールで行ったり来たりが面倒くさい。
狭い画面ではpre要素を隠し、リンクにすり替えるみたいなのでも良さそうだけど、デフォルトでリンクだけの方がHTMLのサイズを抑えることが出来る。ただ、素のHTMLとしてはpre要素があった方が良さそうなので、むー。