CASIO pocket computer
PB-100の宇宙

BASICリストを正確に美しく公開したい
pbList.css

pbList.css は pbPrinter.css の後継ライブラリです.Web フォントとリガチャ(合字)をサポートする環境では美しい PB-100 フォントで BASIC リストを表示することができます.その上 Javascript が有効な環境では、コードのハイライトをします.

また Web フォントが使えない環境では Javascript で画像置換してフォールバックします.リガチャ非対応の環境でも Javascript でフォールバックします.CSS や Javascript が使えない環境でも HTML として正しく、情報の欠落が無いように細心の注意を払ってデザインされています.

pbList.cssの提供する機能

  • PB-100 シリーズのフォントを使用する
  • 行番号とコマンド部分をレイアウトする
  • PB-100 シリーズの独自キャラクタの、下付きの E-(ₑ₋)を合字で扱う
  • ダークカラースキームへの対応

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

  • コードハイライト.連続するスペースに交互に色を置きます.
  • Web フォントをネットワーク監視ツール等でブロックしている環境を検出して、CSS に埋め込んだ Web フォントでフォールバックする.
  • Web フォントが無効な環境を検出して、画像置換でフォールバックする機能. 画像置換とハイコントラストモードが重なった場合、画像置換とダークモードが重なった場合も正しく表示されます.
  • 合字を扱えない環境を検出してフォールバックする.

リガチャと Javascript が無効な環境での表示例

下付きの E と下付きの - が表示されます.以下のサンプルでは幅の薄いスペースを入れてリガチャを解除しています.

ₑ ₋

ブラウザ対応表

記号説明
CSS と画像が有効の場合、適切に表示される
javascript が有効の場合、フォールバックで適切に表示される
javascript が有効の場合でも適切に表示できない点がある
×表示できない
過酷テスト
ブラウザ画像置換ハイコントラストモード画像置換+ハイコントラストモード印刷(背景を印刷しない)
Chromium Edge
IE11~10, EdgeHTML
IE9
IE8
IE7×(*1)×(*1)×(*2)
Firefox
  1. 他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、ハイコントラストモードで欠落する
  2. 他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、背景を印刷しない設定の際には欠落する

pbListエディタ

pbList エディタ

pbList.css による HTML の作成には pbList エディタを使用します.PB-100 と同じ解釈でスペースを挿入して pbList.css のお約束に沿った HTML を生成します.ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう.

pbList エディタは開発中です.デスクトップ用ブラウザで動作を確認しています.

資料とメモ置き場

関連記事とツイート

  1. マイコンプログラムを HTML で表示する CSS のポイント、禁則処理、コピーペーストなど
  2. 行番号と命令の間のスペースは行番号側の <span class="pbLine"> に含める.その際に空白文字が半角スペースでは IE7 以下と WebKit 系、Presto Opera で無視される問題が起こる.&nbsp; でこの問題を回避する.

TODO

  • Nintendo 3DS 用ブラウザ等のスクリーンサイズの小さいブラウザ用に小さい置換用画像を用意しこちらを使用する