CASIO pocket computer
PB-100の宇宙

画面の様子を伝えたい・説明したい
pbLCD.css

pbLCD.css によって HTML で画面イメージを記述することができます.pbDisplay.css の後継ライブラリで表現力とアクセシビリティが向上しています.

ごく一部の CSS のサポートが不十分なブラウザに対しては Javascript で表現を補います.また画像と CSS が使えない環境でも情報の欠落が無いように細心の注意を払って設計されています.

表示の例

RUN DEG
A 1 24      

pbLCD.css の提供する機能

  • PB-100 シリーズの画面イメージを HTML で記述出来る.CSS が無効な環境でも情報の欠落を最小限に抑えるように設計されています.
  • キャラクタを透過する.
  • ゴースト機能.透過したキャラクタに他のキャラクタを重ねる.
  • ツールチップ機能.ツールチップをキャラクタの上下に付けて説明を加える.ツールチップの色を変える.
  • レンジ機能.複数桁に跨る下線を表示して説明対象の範囲を示す.ツールチップの横位置はレンジ内の任意の桁とその桁の間に設定できる.

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

  • :before, :after 疑似要素に非対応の環境を検出して、同等の要素を挿入してフォールバックします
  • :before, :after 疑似要素に対応するも、スタイリングに制限のある環境を検出して、同等の要素を挿入してフォールバックします
  • アニメーション GIF に非対応の Opera 7.20 未満のカーソルを明滅させます.

ゴーストの主客

CSS が無効の場合や、テキストブラウザでの表示

ブラウザ対応表

記号説明
CSS と画像が有効の場合、適切に表示される
javascript が有効の場合、フォールバックで適切に表示される
適切に表示できない点がある
×表示ではない
グレードブラウザ基本機能透過ゴーストツールチップハイコントラストモード印刷(背景を印刷しない)
Aモダンブラウザ(*1)◎(*2)非対応
IE11~10, Edge~18
Chromium Edge◎(*5)
IE9
Firefox 3.5+
Pale Moon
BIE8△(*6)
Opera 7.2x~8.x〇(*3)〇(*3)非対応〇(*3)
Firefox ~3.0.x〇(*3)〇(*3)〇(*3)〇(*3)非対応〇(*3)
IE7〇(*3)〇(*3)×(*7)×(*8)
Mac IE5.x〇(*3)〇(*3)非対応?
CIE5~6〇(*4)〇(*4)〇(*3)×(*7)×(*8)
  1. ハイコントラストモードに非対応のブラウザ.Windows 用の IE, Edge(含む Chromium), Firefox, Pale Moon 以外のもの.
  2. 新しいブラウザではツールチップに影が付き角が丸くなります.
  3. javascript が有効な場合、コンテンツが表示できます.
  4. javascript が有効な場合、コンテンツが表示できます. 但し -ms-filter が無効の場合、疑似的な透過表示になります.
  5. ie11~10, EdgeHTML で表示される青い筐体カラーが表示されない.Chromium Edge 85 が -ms-high-contrast メディアクエリ内で色の設定を出来ないため.
  6. ツールチップの尻尾を鋭角に出来ない.IE8 では :after 疑似要素へ -ms-filter を適用出来ないため.
  7. 他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、ハイコントラストモードで欠落する.
  8. 他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、背景を印刷しない設定の際には欠落する.

pbLCD メーカー

pbLCD.css によるマークアップはお約束がたくさんあるため人力で書くのは困難です.このためのツール pbLCD メーカーで HTML を作成します.ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう.

pbLCD メーカーは開発中です!

資料とメモ置き場

TODO

  • IE7 以下のハイコントラストモード対応
  • 画像が無効な環境用に border によるフォールバック