【CSS】実はあまり知らない？text-indentが効かない時

※この記事は6年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、車がなかなか買いに行けない、みやびです。
狙ってる車買われてまう。
というか駐車場の料金が腐っちまうよ。

さて、表記の話だが、
たとえば下記のように、
SEO的には、文字を入れておきたいが、
文字は表示せず、背景画像によって、表現したいブロックかなんかにtext-indentをきかせ、
文字を飛ばす時があるだろう。

<p id="testId">
  <span>ここはテキスト</span><b>ハートマーク</b>
</p>

#testId > span,
#testId > b {
  display: inline-block;
  vertical-align: middle;
}
#testId > b {
  background: 0 0 url(images/test.png) no-repeat;
  height: 20px;
  text-indent: -9999px;
  width: 20px;
}

それでいて、右寄せしたい時なんて時もあるが、

#testId {
  text-align: right;
}
#testId > span,
#testId > b {
  display: inline-block;
  vertical-align: middle;
}
#testId > b {
  background: 0 0 url(images/test.png) no-repeat;
  height: 20px;
  text-indent: -9999px;
  width: 20px;
}

これで、右寄せかつ、bには背景画像をきかせることができる。

ただし、このパターン、
text-indent: -9999px;がきかない。

text-indent: 9999px;にすると、効きだす。

#testId {
  text-align: right;
}
#testId > span,
#testId > b {
  display: inline-block;
  vertical-align: middle;
}
#testId > b {
  background: 0 0 url(images/test.png) no-repeat;
  height: 20px;
  text-indent: 9999px;
  width: 20px;
}

このtext-indent、ブロックの文字スタートに対して、隙間を効かせるCSS。
通常の考え方であれば、
-9999pxは、スタートから文字が流れる方向と逆の方向の座標に9999pxずらすというものになる。
だから当然、マイナスにすれば、右揃えに対しては、右方向に、インデントをずらすと思いがちだが・・・、
どうやら、座標においてのマイナスは、あくまで左方向ということで、
右寄せなのに、左方向にマイナスでいくら引っ張ってもダメのよう。
つまり、右寄せの場合は、右のインデントを増やして、飛ばすのが正解みたいだ。

しかし、わかりずらい。

以前、なぜかtext-indentが効かない現象が起きたが、
原因がわからずだった。
今考えれば、これが原因だったようだ・・・。

一つの方法でダメなら、いろいろやったり、
逆を試したら、うまくいくのかもしれない。

え、みんな知ってるって？
いや、気づかんしょ、これは！！！