CASIO pocket computer
PB-100の宇宙

top > ツールとライブラリ > pbPrinter.css ver0.x

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 コードハイライト step数をカウント


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 フォントの切り替えができる!
  • リストを解析し色分けしてくれる、コードハイライト機能を搭載!
  • リストのトータルステップ数のカウント機能を搭載!
  • 各種マイコン雑誌のデザインをバンドル!
  • IE 5.5 以降で動作確認.クロスブラウザ!
  • 標準準拠モード・後方互換モードでも見栄えの変わらないナイスマークアップ!
  • 以上の機能を js と css を読み込むだけで使える!
  • 表示エリアの大きさが変わった場合に自動でリサイズする

導入の手引き

ダウンロードして配置

css のインポート

js のインポート

Google Code から直接読み込む

css のインポート

js のインポート

マークアップの手引き

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

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

動作モードhtml タグクラス
プログラムリスト<code class="PB-100">PB-100 または PB-120

プログラムリストの場合

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

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

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

オプション一覧

機能必須パラメータデフォルト
フォントの選択PB-100, PB-120PB-100
プリンタの選択FP-12T, FP-40TFP-40T
デザインの選択desine:printer, desine:PJdesine:printer
出力シートの分割数separate:1( 1以上の整数)フィット(*)
コードハイライトhilight (で有効になる)
step数のカウントcount (で有効になる)

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

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

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

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

プリンタ機種一行の最大印字文字数シート一枚の幅
FP-12T20190 px
FP-40T40330 px

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

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

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

ブロック要素で囲む

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

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

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

浮動小数点表記

浮動小数点表記を行う場合は下付き文字を表す <sub> タグを使用し、1E3, 1E-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