text-indentも指定してもテキストを非表示にできない

jQueryプラグインを利用してスライダーを作っていました。

どうやらこのプラグインは、サムネイルではなく番号をコントローラーとして出力するようです。

ところがデザインでは、この部分には番号ではなく丸いボタンが指定されていました。

なので、背景色や角丸をCSSで設定し、番号を飛ばすことにしました。

※プラグインの中身をカスタマイズする方法もあるのですが、文書構造的に番号をソースに残したかったのでCSSのみで対応することにしました。

テキストを非表示にするためによく使われる、以下のスタイルを指定しました。 ポイントとなるのは7行目、text-indentに大きな値を指定する点です。

ul li{
  width: 17px;
  height: 17px;
  background: #FFF;
  border-radius: 50%;
　text-align: right;
  text-indent: -99999px;
}

ところが、テキストが非表示になりません。

CSSをよく見て頂ければわかるのですが、実はこのサムネイルにはtext-align:rightも同時に指定されており、これが原因であるようです。

理屈はいたって簡単で、インデントで負の値を指定しても、右揃えになってしまうためテキストの末端が表示されてしまうという仕組みでした。

なので、今回のようにtext-align:rightが指定してある場合は、次のように指定を変えれば解決できます。

text-indent: 99999px;

これで無事に意図した表示を実装することができました。

Androidデフォルトブラウザで表示が崩れる

ところがこのスタイルをAndroidデフォルトブラウザで表示すると、次のような表示になってしまいました。 

どうやらAndroid端末ではtext-indentで指定した分だけ、描画領域を確保してしまうようです。

ほかにもAndroidではtext-indentが効かないというバグが頻繁に効かれます。

そこで、Androidにも対応できるスタイル指定を行います。

※下記CSSではサイズや背景色の指定は省略しています。

ul li{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

text-indent:99999pxの代わりに上記のスタイルを３つセットで指定すると、きちんとテキストを非表示にすることができます。

こちらの指定、もちろんPCやiOSでも有効です。

なのでレスポンシブコーディングや、マルチデバイス対応の際は、この指定を使えばたいていのデバイスでテキストを非表示にすることができます。