pbChr.css によって PB-100 の LCD キャラクタを文章中に登場させることができます．
グラフィック機能の無い PB-100 では各キャラクタに様々な意味を持たせます．pbChr.css を使うことで、効果的にキャラクタの意図をユーザーに伝えることができます．
マークアップ
pbChr.css によるマークアップを書く際は便利なマークアップ一覧を使用しましょう．
- キャラクタを文字通りの意図で使っている場合は
<samp>でマークアップしています． - キャラクタに特別な役割がある場合は
<dfn>を使用します．併せてtitle属性に役割を書いておくのが良いでしょう．
使用例とマークアップ
1. ♥に重なるとライフが回復します．
1. <samp class="pbChr69">♥</samp>に重なるとライフが回復します．
2. プレイヤーは騎士(Ω)となってモンスターと戦います．
2. プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となってモンスターと戦います．
JavaScript が有効の環境で提供されるフォールバック
- アニメーション GIF に非対応の Opera 7.20 未満のカーソルを点滅させます．
- ハイコントラストモード時に、CSS アニメーション に非対応または途中から対応した Internet Explorer 9, Gecko 1.9.1~88, Goanna でカーソルを点滅させます．
既知の問題
Internet Explorer 7以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策
Internet Explorer 7以下にはテキストフローの先頭に pbChr.css を書くと左にズレる問題があります．画像置換に使っている text-indext:-21px が影響しています．
テキストフローの先頭にゼロ幅の空白(​)を入れることで解決しますが、Internet Explorer 5と Nintendo 3DS 用ブラウザではフォントが無く豆腐になるため、 条件付きコメントと組み合わせて Internet Explorer 5には を使用します．
<!--[if IE 5]> <![endif]--><!--[if (IE 6)|(IE 7)]>​<![endif]-->
<samp class="pbChr72">□</samp>画像置換の制限
pbChr.css と pbLCD.css では Internet Explorer 8以上と他のモダンブラウザに対して content:url() による画像置換を行っています．これは background-image:url() に比べて次の利点があります．
- 背景等を無効にした印刷の際にコンテンツが欠落しない
- Windows OS のハイコントラストモード時にコンテンツが欠落しない
一方で対応ブラウザが若干狭くなり、次のブラウザでは使うことが出来ません．これらのブラウザは background-image:url() に切り替えています．
より詳しい情報は「hamura.cssのマルチブラウザ技術、pbLCD.cssとpbChr.css, pbList.cssのフォールバックの画像置換と強制カラーモード」を参照します．
| ブラウザ | 対応状況 | 詳しい状況 |
|---|---|---|
| Opera 7.20~9.2x | 部分対応 | インラインブロック要素の :before, :after 疑似要素が CSS-P に非対応のため background-image:url() を使っている．この為に背景を印刷しない設定の印刷時にコンテンツが欠落する． |
| Internet Explorer 7以下 | 非対応 | :before, :after 疑似要素に非対応のため background-image:url() を使っている．この為にハイコントラストモードと背景を印刷しない設定の印刷時にコンテンツが欠落する． |
| Firefox 2~3.0.x(Gecko 1.8.1~1.9.0) | 非対応 | :before, :after 疑似要素が CSS-P に非対応のため background-image:url() を使っている．この為にハイコントラストモードと背景を印刷しない設定の印刷時にコンテンツが欠落する． |
| Opera 7~7.1x | 非対応 | :before, :after 疑似要素が CSS-P に非対応のため background-image:url() を使っている．この為に背景を印刷しない設定の印刷時にコンテンツが欠落する． |
| Firefox 1.5 以下(Gecko ~1.8.0) |
マークアップ一覧
| 表示 | コード | 表示 | コード |
|---|---|---|---|
| + | | |
| - | | * | |
| / | | ↑ | |
| ! | | " | |
| # | | $ | |
| > | | ≧ | |
| = | | ≦ | |
| < | | ≠ | |
| 0 | | 1 | |
| 2 | | 3 | |
| 4 | | 5 | |
| 6 | | 7 | |
| 8 | | 9 | |
| . | | π | |
| ) | | ( | |
| ᴇ⁻ | | ᴇ | |
| A | | B | |
| C | | D | |
| E | | F | |
| G | | H | |
| I | | J | |
| K | | L | |
| M | | N | |
| O | | P | |
| Q | | R | |
| S | | T | |
| U | | V | |
| W | | X | |
| Y | | Z | |
| a | | b | |
| c | | d | |
| e | | f | |
| g | | h | |
| i | | j | |
| k | | l | |
| m | | n | |
| o | | p | |
| q | | r | |
| s | | t | |
| u | | v | |
| w | | x | |
| y | | z | |
| ? | | , | |
| ; | | : | |
| ○ | | ∑ | |
| ° | | △ | |
| @ | | × | |
| ÷ | | ♠ | |
| ← | | ♥ | |
| ♦ | | ♣ | |
| μ | | Ω | |
| ↓ | | → | |
| % | | ¥ | |
| □ | | [ | |
| & | | _ | |
| ' | | ・ | |
| ] | | ■ | |
| 表示 | コード |
|---|---|
|
| 表示 | コード |
|---|---|
| \ | |
| ▓ | |
| 表示 | コード | 表示 | コード |
|---|---|---|---|
| S | | ||
| ♠ | | ♥ | |
| ♦ | | ♣ | |