CASIO pocket computer
PB-100の宇宙

LCDキャラクタを表示したい
pbChr.css

pbChr.css によって PB-100 の LCD キャラクタを文書中に登場させることができます.

グラフィック機能の無い PB-100 では各キャラクタに様々な意味を持たせます.pbChr.css を使うことで、効果的にキャラクタの意図をユーザーに伝えることができます.

マークアップ

pbChr.css によるマークアップを書く際は便利なマークアップ一覧を使用しましょう.

  1. キャラクタを文字通りの意図で使っている場合は <samp> でマークアップしています.
  2. キャラクタに特別な役割がある場合は <dfn> を使用します.併せて title 属性に役割を書いておくのが良いでしょう.

使用例とマークアップ

1. に重なるとライフが回復します.

1. <samp class="pbChr69">&hearts;</samp>に重なるとライフが回復します.

2. プレイヤーは騎士(Ω)となってモンスターと戦います.

2. プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となってモンスターと戦います.

既知の問題と対応

IE7 以下にはテキストフローの先頭に pbChr.css を書くと左にズレる問題があります.画像置換に使っている text-indext:-21px が影響しています.

テキストフローの先頭にゼロ幅の空白(&#8203;)を入れることで解決しますが、IE5 と Nintendo 3DS 用ブラウザではフォントが無く豆腐になるため、 条件付きコメントと組み合わせて IE5 には &nbsp; を使用します.

<!--[if IE 5]>&nbsp;<![endif]--><!--[if (IE 6)|(IE 7)]>&#8203;<![endif]-->
<samp class="pbChr72">□</samp>

非対応ブラウザでのJavascriptによるフォールバック

pbChr.css と pbLCD.css では IE8 以上と他のモダンブラウザに対して content:url() による画像置換を行っています.これは background-image:url() に比べて次の利点があります.

  1. 背景等を無効にした印刷の際に欠落しない
  2. Windows OS のハイコントラストモード時にコンテンツが欠落しない

一方で対応ブラウザが若干狭くなり、次のブラウザで不具合が出ます.これらのブラウザについては、Javascript で background-image:url() に切り替えています.

content:url によるイメージスプライトに問題のあるブラウザ
ブラウザ問題
IE7 以下:before, :after 疑似要素に非対応.background-image:url() を使っている為、ハイコントラストモード時にコンテンツが欠落する.
Opera 9.0~9.2xインラインブロック要素で画像が欠落する.
Opera 8.xインラインブロック要素と :before 疑似要素で画像が表示されない.
Opera 7.2xインラインブロック要素と :before 疑似要素で画像が表示されない.:after 疑似要素では画像の表示が不安定.
Opera 7.0~7.1x:before, :after 疑似要素が CSS-P に非対応のため画像が表示されない.
Firefox 3.0.x 以下

マークアップ一覧

表示コード表示コード
 
<samp class="pbChr00"> </samp>
+
<samp class="pbChr01">+</samp>
-
<samp class="pbChr02">-</samp>
*
<samp class="pbChr03">*</samp>
/
<samp class="pbChr04">/</samp>
<samp class="pbChr05">↑</samp>
!
<samp class="pbChr06">!</samp>
"
<samp class="pbChr07">"</samp>
#
<samp class="pbChr08">#</samp>
$
<samp class="pbChr09">$</samp>
>
<samp class="pbChr0A">&gt;</samp>
<samp class="pbChr0B">≧</samp>
=
<samp class="pbChr0C">=</samp>
<samp class="pbChr0D">≦</samp>
<
<samp class="pbChr0E">&lt;</samp>
<samp class="pbChr0F">≠</samp>
0
<samp class="pbChr10">0</samp>
1
<samp class="pbChr11">1</samp>
2
<samp class="pbChr12">2</samp>
3
<samp class="pbChr13">3</samp>
4
<samp class="pbChr14">4</samp>
5
<samp class="pbChr15">5</samp>
6
<samp class="pbChr16">6</samp>
7
<samp class="pbChr17">7</samp>
8
<samp class="pbChr18">8</samp>
9
<samp class="pbChr19">9</samp>
.
<samp class="pbChr1A">.</samp>
π
<samp class="pbChr1B">π</samp>
)
<samp class="pbChr1C">)</samp>
(
<samp class="pbChr1D">(</samp>
ₑ₋
<samp class="pbChr1E">&#8337;&#8331;</samp>
<samp class="pbChr1F">&#8337;</samp>
A
<samp class="pbChr20">A</samp>
B
<samp class="pbChr21">B</samp>
C
<samp class="pbChr22">C</samp>
D
<samp class="pbChr23">D</samp>
E
<samp class="pbChr24">E</samp>
F
<samp class="pbChr25">F</samp>
G
<samp class="pbChr26">G</samp>
H
<samp class="pbChr27">H</samp>
I
<samp class="pbChr28">I</samp>
J
<samp class="pbChr29">J</samp>
K
<samp class="pbChr2A">K</samp>
L
<samp class="pbChr2B">L</samp>
M
<samp class="pbChr2C">M</samp>
N
<samp class="pbChr2D">N</samp>
O
<samp class="pbChr2E">O</samp>
P
<samp class="pbChr2F">P</samp>
Q
<samp class="pbChr30">Q</samp>
R
<samp class="pbChr31">R</samp>
S
<samp class="pbChr32">S</samp>
T
<samp class="pbChr33">T</samp>
U
<samp class="pbChr34">U</samp>
V
<samp class="pbChr35">V</samp>
W
<samp class="pbChr36">W</samp>
X
<samp class="pbChr37">X</samp>
Y
<samp class="pbChr38">Y</samp>
Z
<samp class="pbChr39">Z</samp>
a
<samp class="pbChr40">a</samp>
b
<samp class="pbChr41">b</samp>
c
<samp class="pbChr42">c</samp>
d
<samp class="pbChr43">d</samp>
e
<samp class="pbChr44">e</samp>
f
<samp class="pbChr45">f</samp>
g
<samp class="pbChr46">g</samp>
h
<samp class="pbChr47">h</samp>
i
<samp class="pbChr48">i</samp>
j
<samp class="pbChr49">j</samp>
k
<samp class="pbChr4A">k</samp>
l
<samp class="pbChr4B">l</samp>
m
<samp class="pbChr4C">m</samp>
n
<samp class="pbChr4D">n</samp>
o
<samp class="pbChr4E">o</samp>
p
<samp class="pbChr4F">p</samp>
q
<samp class="pbChr50">q</samp>
r
<samp class="pbChr51">r</samp>
s
<samp class="pbChr52">s</samp>
t
<samp class="pbChr53">t</samp>
u
<samp class="pbChr54">u</samp>
v
<samp class="pbChr55">v</samp>
w
<samp class="pbChr56">w</samp>
x
<samp class="pbChr57">x</samp>
y
<samp class="pbChr58">y</samp>
z
<samp class="pbChr59">z</samp>
?
<samp class="pbChr5C">?</samp>
,
<samp class="pbChr5D">,</samp>
;
<samp class="pbChr5E">;</samp>
:
<samp class="pbChr5F">:</samp>
<samp class="pbChr60">○</samp>
<samp class="pbChr61">∑</samp>
°
<samp class="pbChr62">°</samp>
<samp class="pbChr63">△</samp>
@
<samp class="pbChr64">@</samp>
×
<samp class="pbChr65">×</samp>
÷
<samp class="pbChr66">÷</samp>
<samp class="pbChr67">&spades;</samp>
<samp class="pbChr68">←</samp>
<samp class="pbChr69">&hearts;</samp>
<samp class="pbChr6A">&diams;</samp>
<samp class="pbChr6B">&clubs;</samp>
μ
<samp class="pbChr6C">μ</samp>
Ω
<samp class="pbChr6D">Ω</samp>
<samp class="pbChr6E">↓</samp>
<samp class="pbChr6F">→</samp>
%
<samp class="pbChr70">%</samp>
¥
<samp class="pbChr71">&yen;</samp>
<samp class="pbChr72">□</samp>
[
<samp class="pbChr73">[</samp>
&
<samp class="pbChr74">&amp;</samp>
_
<samp class="pbChr75">_</samp>
'
<samp class="pbChr76">'</samp>
<samp class="pbChr77">・</samp>
]
<samp class="pbChr78">]</samp>
<samp class="pbChr79">■</samp>
カーソル
表示コード
_
<samp class="pbChrCS"><blink>_</blink></samp>
後継機種で新たに追加された文字
表示コード
\
<samp class="pbChr7A" lang="en">&#x5c;</samp>
<samp class="pbChr7B">&#9619;</samp>
後継機種で新しくなったフォント
表示コード表示コード
S
<samp class="pbChr32a">S</samp>
<samp class="pbChr67a">&spades;</samp>
<samp class="pbChr69a">&hearts;</samp>
<samp class="pbChr6Aa">&diams;</samp>
<samp class="pbChr6Ba">&clubs;</samp>