CASIO pocket computer
PB-100の宇宙

PB-100フォントを文章の中で使いたい
pbFont.css

pbFont.css は文章中のコード片や変数、印字結果などの出力を PB-100 のルックにします.

HTML にはコンピュータに関するタグがいくつか用意されています.対象に応じて <code>, <var>, <samp> を使い分けてマークアップします.

pbFont.cssの提供する機能

  • PB-100 シリーズのフォントを使用する
  • PB-100 シリーズの独自キャラクタの、ᴇ⁻ を合字で扱う

JavaScriptが有効の環境で提供される機能

  • Web フォントをネットワーク監視ツール等でブロックしている環境を検出して、CSS に埋め込んだ Web フォントでフォールバックする.
  • 合字を扱えない環境を検出してフォールバックする.

合字と JavaScript が無効な環境での表示例

下付きの E と上付きの - が表示されます.以下のサンプルではゼロ幅の空白(&#8203;)を入れて合字を解除しています.

 ᴇ​⁻

マークアップ

次に示す以外のタグに使用することも可能ですが、なるべく意味に沿ったタグを使用しましょう.

  1. 変数には <var>
  2. BASIC コマンドやプログラム片には <code>
  3. 画面やプリンターへの出力結果には <samp>
表示サンプルコード
1名前はX$に入っています.
<var class="pbFont">X$</var>
2GOTO 10で次の面に進みます
<code class="pbFont">GOTO 10</code>
3ゲーム終了でCLEAR!!と表示されます.
<samp class="pbFont">CLEAR!!</samp>

注意事項

pbFont.css は pbList エディタや pbLCD メーカーのような支援アプリや、pbChr.css のようなマークアップの一覧を提供しません. 次に示す注意事項に気を付ければ意図したコンテンツが制作できます.

1. バックスラッシュを記述する際は

日本語 Web 文書でバックスラッシュを使用するには lang=en を適宜に使用します. この指定を行っても一部の日本語フォント(Windows 10 "UD Digi Kyokasho N-R" で遭遇)で ¥ が表示されるケースがありますが、pbFont.css, pbList.css で使うには多分大丈夫です.

<span lang="en">&#x5c;</span>

2. 文字参照を使用する記号

また一部の記号は文字参照を使って記述します.PB-100 シリーズのフォントセットにあるものでは次の記号が該当します.

文字文字実態参照と数値文字参照
<&lt;
>&gt;
¥&yen;
\&#x5c;バックスラッシュ
ᴇ⁻&#7431;&#8315;
&#7431;
&spades;
&hearts;
&diams;
&clubs;
&#9619;市松模様