pbList.css|PB-100の宇宙

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

また Web フォントが使えない環境では JavaScript で画像置換してフォールバックします．合字非対応の環境でも JavaScript でフォールバックします．適切なマークアップで、CSS や JavaScript が使えない環境でも情報の欠落が無いように、注意深くデザインされています．

pbList.cssの提供する機能

タグに独自属性を追加してデフォルト動作を無効にできます．

<pre class="pbList" pbskip="prettify fallback:img"><code> ...

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

閲覧性
記号	ノート
☆	CSS と Web フォントが有効の場合、適切に表示される．JavaScript が有効の場合、ハイライトする．
◎	CSS と Web フォントが有効の場合、適切に表示される．JavaScript が有効の場合、合字のフォールバックをしてハイライトする．
〇	CSS と画像に加えて JavaScript が有効の場合、画像置換フォールバックで適切に表示される
×	閲覧が困難

ブラウザ	ハイコントラストモード	画像置換(要 JavaScript)
ブラウザ	ハイコントラストモード	画像置換のみ	ハイコントラストモード	背景を印刷しない設定の印刷
Chromium Edge, Chrome 89+, Firefox 89+	☆	〇	〇	◎
Internet Explorer 10, 11, Microsoft Edge 12~18	◎	〇	〇	◎
Internet Explorer 8, 9	◎	〇	〇	◎
Internet Explorer 5, 5.5, 6, 7	◎	〇	×(*1)	×(*2)
Firefox 34~88	◎	〇	〇	◎
Firefox 3.5(3.1β)~33(Gecko 1.9.1~33), Pale Moon(Goanna)	◎	〇	〇	◎
Firefox 2~3.0(Gecko 1.8.1~1.9.0)	×(*3)	〇	×(*1)	×(*2)

他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、ハイコントラストモードで欠落する
他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、背景を印刷しない設定の際には欠落する
Web フォントに非対応の為、ハイコントラストモードで欠落する

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

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