pbPrinter.css
Version 0.x

このページの情報は古くなっています．現在はよりよい HTML 構造でアクセシビリティが高く、そのうえ対応ブラウザも多い後継の pbList.css を使用しましょう．

インターネット上における PB-100 用プログラムリストの公開に革命をもたらした pbPrinter.css のページです．

サンプル

PB-100 FP-12T シート数は一枚

10 PRINT CSR 1;"GOTO PB-100"
20 GOTO 10

PB-120 FP-40T コードハイライト ステップ数をカウント

10 PRINT CSR 1;"GOTO PB-100"
20 FOR A=0 TO 11
30 PRINT CSR A;"*";
40 B = SQR π^ SQR π^SQR π
50 NEXT A: PRINT
60 PRINT "Enjoy!"

PB-100 FP-12T デザイン：ポケコンジャーナル

10 PRINT CSR 1;"GOTO PB-100"
20 FOR A=0 TO 11
30 PRINT CSR A;"*";
40 B = π^π^π
50 NEXT A: PRINT
60 PRINT "Enjoy!"

特徴

• PB-100シリーズ用プリンタ、FP-12T・FP-40T の印字結果を再現！
• Web 上で 非アスキーな PB-100 フォントテキスト情報を正確に流通できる！
• PB-100 と同じ解釈でリストを整形してくれる クリーンアップ機能を搭載！
• PB-100 フォント・PB-120 フォントの切り替えができる！
• リストを解析し色分けしてくれる、コードハイライト機能を搭載！
• リストのトータルステップ数のカウント機能を搭載！
• 各種マイコン雑誌のデザインをバンドル！
• Internet Explorer 5.5以降で動作確認．クロスブラウザ！
• 標準準拠モード・後方互換モードでも見栄えの変わらないナイスマークアップ！
• 以上の機能を JavaScript と CSS を読み込むだけで使える！
• 表示エリアの大きさが変わった場合に自動でリサイズする

導入の手引き

ダウンロードして配置

CSSのインポート

javascriptのインポート

Google Codeから直接読み込む

CSSのインポート

javascriptのインポート

マークアップの手引き

pbPrinter.css を適用する要素の指定は、HTML タグと クラスを組み合わせて行います．

適切なタグとクラスが指定されている場合、JavaScript によって HTML タグが書き換えられます．

プログラムリストの場合

<code class="PB-100" title="hello">
10 PRINT "HELLO PB!"
</code>

クラスに PB-100 または PB-120 を含む <code> タグに対して変換が行われます．title 属性を指定しておくと、その内容も表示されます．

さらにオプションとして、クラスを追加指定しておくと変換結果を制御できます．

オプション一覧

* 表示エリアの許す最大シート数が自動で設定される．

マークアップに関する注意

pbPrinter.css の表示には最小で 190px 以上が必要です．また、高さは指定しないでください．

pbPrinter.css は表示領域に対してセンタリングして表示されます．

FP-40T での表示には 330px 以上の表示領域が必要ですが、これに満たない場合は FP-12T での表示に切り替わります．

表示エリアのサイズが変わった場合、pbPrinter.css は自動でシートの分割数やプリンタ機種を変更して再描画します．

マークアップの際のポイント

ブロック要素で囲む

<code>, <samp> はどれもインライン要素になります．実際のマークアップの際には、ブロック要素の <div> タグで囲んでおくのが良いでしょう．

JavaScript が切られていた場合にも ページの見栄えが維持できます．また、浮動小数点表記を行わない ( <sub> を使わない ) 場合は <pre> タグで囲んでおくと改行が反映されるので便利です．

<pre><var class="PB-100" title="vars">A = 1000</var></pre>

浮動小数点表記

浮動小数点表記を行う場合は下付き文字を表す <sub> タグを使用し、1_E3, 1_E-3 などとマークアップします．

1<sub>E</sub>3, 1<sub>E-</sub>3

この際には、<pre> タグは、<sub> タグを包むことはできないので注意しましょう．

<div>
<code class="PB-100" title="vars">
A = 1<sub>E</sub>3
</code>
</div>

API

.init( _option ); デフォルト値の変更．

.print( element, opt_option ); 要素を指定して変換の実施．

アップデート履歴

Version 0.3.014