html上のsource code

code elementなるものがあるが、実際のところ、使われ具合は微妙なようだ。

普段思わずやってしまう、programのsource code全体をcode elementに入れておいて、インデントが破壊されると文句を言うのは筋違いのようだ。事実、code elementはinline elementであって、block elementじゃない。

2002とちょっと古いが、html4に対応しているからいいだろう。ちょっと不思議なテキストレベルの要素タイプ の「2.1 CODE要素タイプ」によれば

これによると、codeはプログラム内の式を引用したり、変数、関数、プログラムの名前といったキーワードをマーク付けするときに利用できることが分かります。たとえばHTMLについて説明する本稿のような文書なら

強調要素タイプには<code>em</code>と<code>strong</code>があります。

といった使い方が考えられるでしょう。

一方で、html原理主義者としてとしてどーのこーというより、とにかく見た目が綺麗で、裏にあるdbのデータを流し込みやすいことが大事なときがある。とくに行番号を表示したい、かつcopy&pasteでコードを流用しやすいようにしたいとなると、状況が悪化してくる。

結局tableを使うかどうかのようで、使う場合にはtableの中にpreが入れ子になる。preのblockを左右に並べる手もあるだろうが、windowをリサイズされると、codeを含んだpreが行番号のpreの下に行って崩れるのかな。幅を指定したblockで囲めばよいのだろうが、agentしだいだね。コードのpreの幅は、まあ80文字固定で問題ないだろう。それで困るならそのコードは見るに値しないから、htmlにする必要もなさそう。ネタのonlinerとかは違うだろうが。逆に1行80文字の幅が確保できない環境でsourceを表示することはそもそもに無理があるのだろう。そうなるとどう妥協するかだ。

• table+pre派
  
  
  • pros: copy&pasteがうまくいく
  
  
  • cons: tableじゃないものをtableでレイアウト。


• 1行にline番号とソースを置く派
  
  
  • pros: htmlとしてはOK
  
  
  • cons: ソースコードがtextとして連続でなくなるのでcopy&pasteが破綻する。

codepadとかのhtmlは読めるけど、ajax全盛なのでしらべるのめんどくさい。

それをいっちゃあおしまい的なことを書くと、outputの形が不定寸法になるhtmlで、印刷物のような綺麗なlayoutをしようとすること自体無理がある。htmlの底流に流れている思想は、「横幅が足りんかったら下へ下へ」なのだ。印刷物の場合は、fillできるboxが幾つか並んでいて、最初のboxにtextを流し込んでそれであふれたら次のboxに入れていく、boxは絶対座標で指定という思想だ。QuarkXPressとかPageMakerとかいったDTPソフトはそういった、boxへの流し込みをサポートしている(その昔、Wordで2カラム構成をとるのに全角スペースを二個真ん中に入れて、手動で2カラムした怪力の人を見たことがあったなぁ・・・)。ましてや複数Page化するとhtmlはお手上げだ。おそらく印刷関係者から見ると、これとかは同じ考えだろう。そんなに厳密なlayoutがほしいならpostscriptやpdfを使うべし。


最後にJoke:
普段私が触れるtextって左から右なんですが、世の中の言語にはその逆なのもあるので右から左にもできる。具体的にはヘブライ語やアラビア語だ。一方で、プログラミング言語でRtoLなやつは私が不勉強なせいもあってきいたことが無い。