個人的なメモ
- font-family: monospace;
- text-wrap:none; /* draft */
- white-space:pre; /* W3C CSS2.1 */
- tab-size:8; /* draft */
- overflow:auto; /* auto or scroll */
- width:80%; /* for example */
注:
draft と書いたのは, working draft 2012 のレベルで、サポートレベルが低い。
- em,ex
- cm,mm,in
- pt (=1/72 in)
- px (=1/96 in)
- %
- cols,rows (used only in textarea)
exは小文字の"x"の高さによる相対値。emの半分。)
emは現在のフォントサイズによる相対値。
(Wikipedia: In metal type, the point size of the font described the size (height) of the metal body on which the typeface's characters were cast.
Point (typography)
)
筆者コメント: これによると、鉛で出来た活字は、文字に係わらず同じフォントでは同じ高さを持っていた。(これは横書きの場合には当然! そうでないと活字を並べるのが困難になる。) その高さを基に point が定義された。この高さは大文字の最大の高さ(ベースラインまでの空白を含む)に等しいか、あるいは、それより、幾分大きいかだったろう。
Knuth の TeX Book
には次のように書かれている。
「
各フォントには、それぞれ固有の em と ex の値が定義されている。以前は、
」
em
は M という文字の幅を表していたが、もはや正しくなくなり、em の値は、単にそれぞれのフォントにされている任意の単位を表すだけとなっている
筆者コメント: ここに書かれている「M」はプロポーショナルフォントの M である。
次に4つの単位(インチ、ポイント、論理ピクセル、物理ピクセル)を実際に比較してみる。横幅だけに着目する。
ややこしいのは、ここで言う「物理ピクセル」が本当の物理ピクセルを表していない事である。ディスプレイの解像度がどんどん高くなっていく中で、旧来のソフトとの互換性を保つために、「物理ピクセル」自体が本当の物理ピクセルにマッピングされている。
"&" "<" ">"のいずれかが、コードに含まれる場合の前処理の事。前処理の内容は、次の変換である。
"&" → "&" "<" → "<" ">" → ">"
このような前処理を必要としていない方法が好ましい。
例
pre.code {
text-align:left;
overflow:auto;
width:80%;
background-color:white;
border-width: 1px 1px 1px 1px;
border-style:solid;
border-color: #0cc;
margin-top: 0.0em;
margin-bottom:0.5em;
margin-left:auto;
margin-right:auto;
font-family: courier,monospace;
font-size: 95%;
}
<textarea> ここにコードを書く </textarea>のような使い方をするのだが、「ここにコードを書く」と書いた部分は、textarea に読み取られる時に、何らかの変換を受けるのか否かに関して、どこにも説明が見当たらない。
実験によると、Safari や Google Chrome では、そのまま読み取られていない。& の扱いが微妙である。文字を表す場合には、その文字が textarea に取り込まれる。これは多分仕様であろう。そのようなニーズが存在するから。
pre タグと同様に、HTML Escape を必要としていないケースでしか使えない。
(pre タグは動作の仕様が定められているが、textarea は、不明である。その意味で pre タグよりたちが悪い。)
wrap:off が指定できない。テキストの折り返しを防げない。
textarea の利用方法として、プログラムコードを置くのは邪道である。
textarea.code{
overflow:auto; /* auto,scroll */
text-wrap:none; /* no effect */
font-family: courier,monospace;
font-size: 95%;
line-height: 1.3;
width:80%;
height:20ex;
}
text-wrap:none が働いていない)
.txtによって、コンテンツが Plain text である事が保証されるのか否かが、はっきりしない。
iframe.code {
text-align:left;
wrap:off; /* no effect */
overflow:auto;
width:80%;
height:15em;
background-color:white;
border-width: 1px 1px 1px 1px;
border-style:solid;
border-color: #0cc;
margin-top: 0.0em;
margin-bottom:0.5em;
margin-left:auto;
margin-right:auto;
font-family: courier,monospace;
font-size: 100%;
seamless;
}
bootes 1 0:00 0:05 100K Await init bootes 2 5:33 0:00 0K Wakeme genrandom bootes 3 0:00 0:00 0K Wakeme alarm bootes 5 0:14 1:43 380K Sleep usbd bootes 6 0:00 0:00 380K Pread usbd bootes 7 0:00 0:00 380K Rendez usbd bootes 8 0:00 0:00 380K Rendez usbd bootes 9 0:00 0:00 0K Wakeme rxmitproc bootes 11 1:22 0:00 0K Wakeme etherread4 bootes 12 0:00 0:00 0K Wakeme recvarpproc bootes 13 0:00 0:00 0K Wakeme etherread6 bootes 14 0:00 0:00 188K Sleep ipconfig bootes 16 0:00 0:00 0K Wakeme floppy bootes 17 0:08 0:00 0K Wakeme #I0tcpack bootes 18 0:01 0:03 312K Pread factotum bootes 19 0:00 0:00 0K Idle pager bootes 25 0:00 0:01 172K Pread cs bootes 33 0:00 0:35 104K Sleep timesync bootes 36 0:00 0:00 388K Await dns bootes 37 0:01 0:03 1196K Pread dns none 48 0:00 0:00 168K Sleep listen none 50 0:00 0:00 168K Await listen bootes 51 0:00 0:00 148K Await listen bootes 53 0:00 0:00 148K Open listen none 54 0:00 0:00 168K Open listen none 55 0:00 0:00 168K Open listen
document にコードを直接埋め込むことになる。小さいコードでは良いが、大きなコードは不便。
この方法の利点は、コード内に使える文字列の制限が少ない事。(唯一の制限は、コメントの終了文字列を含まないことである。HTML Escape を javascript で処理できる事。その一例を紹介する。
コードを含むコメント欄は
この方法の欠点ではないが、例示した javascript コードでは、script の中に、"-->" が含まれていると、コメントの終了だと勘違いされ、働かなくなる。もっと緻密なプログラムにすれば解決するだろうが、その価値があるか?
上のコードは次のように取り込んでいる。
取り込むコードを、(加工せずに)ファイルに保存しておき、それを ajax を使って読み取る。