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 が無効な環境での表示例」を確認できます．
ブラウザ対応表
| 記号 | ノート |
|---|---|
| ☆ | CSS と Web フォントが有効の場合、適切に表示される．JavaScript が有効の場合、ハイライトする． |
| ◎ | CSS と Web フォントが有効の場合、適切に表示される．JavaScript が有効の場合、合字のフォールバックをしてハイライトする． |
| 〇 | CSS と画像に加えて JavaScript が有効の場合、画像置換フォールバックで適切に表示される |
| × | 閲覧が困難 |
| ブラウザ | 閲覧性 | ||||
|---|---|---|---|---|---|
| ☆ | ◎ | 〇 | × | 未検証 | |
| Internet Explorer | 5.0以降 | 4未満 | |||
| Microsoft Edge(EdgeHTML) | ✔ | ||||
| Opera(Presto) | 10.0以降 | 7.0以降 | 6以下 | ||
| Firefox | 34+ | 3.5(3.1β)以降 | Netscape Navigator 6.0以降 | Gecko マイルストーン | |
| Pale Moon | ✔ | ||||
| WebKit 系 | Chrome 34+, Safari 9.1+ | Safari 3.1以降, Chrome 1以降 | Safari 3.0以降 | Safari 2未満 | |
| Android の標準ブラウザ | 37+ | 2.2以降 | 2.1未満 | ||
| iOS の Safari Mobile | 9.3+ | 3.2以降 | 3.1未満 | ||
| NetSurf | ✔ | ||||
Windows OS のハイコントラストモードを有効にして、強制カラーモード対応ブラウザで閲覧する場合の閲覧性
| ブラウザ | 強制カラーモード(ハイコントラストモード) | 画像置換 | 画像置換 + 強制カラーモード(ハイコントラストモード) | 背景を印刷しない印刷 |
|---|---|---|---|---|
| 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 フォントに非対応の為、ハイコントラストモードで欠落する
より詳しい情報は「hamura.cssのマルチブラウザ技術、pbLCD.cssとpbChr.css, pbList.cssのフォールバックの画像置換と強制カラーモード」を参照します．
pbListエディタ
pbList.css による HTML の作成には pbList エディタを使用します．PB-100 と同じ解釈でスペースを挿入して pbList.css のお約束に沿った HTML を生成します．ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう．
pbList エディタは開発中です．デスクトップ用ブラウザで動作を確認しています．
資料とメモ置き場
関連記事とツイート
- 『マイコンプログラムを HTML で表示する CSS のポイント、禁則処理、コピーペーストなど』
- 行番号と命令の間のスペースは行番号側の
<span class="pbLine">に含める．その際に空白文字が半角スペースでは Internet Explorer 7以下と WebKit 系、Presto Opera で無視される問題が起こる． でこの問題を回避する．