アクセシビリティを維持しながら、CSS で文字の半分をスタイル設定できますか?-CSSチュートリアル-php.cn

アクセシビリティを維持しながら、CSS で文字の半分をスタイル設定できますか?

Susan Sarandon

リリース： 2024-12-26 21:48:17

オリジナル

965 人が閲覧しました

Can CSS Style Half of a Character While Maintaining Accessibility?

CSS は文字の半分に適用できますか?

謎:

文字の半分を作成するのと同じように、文字の半分だけをスタイリングするというとらえどころのない目標透明で、多くの人を困惑させてきました。この記事では、CSS と JavaScript の両方を採用した包括的なソリューションでこの難題に対処します。

アクセシビリティの採用:

当社のソリューションはアクセシビリティを優先し、スクリーンリーダーがテキストをシームレスに読めるようにします。視覚障害のある人向け。

パート 1: 単一の文字スタイル化

単一文字のスタイル設定には、純粋な CSS で十分です。

.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px;
  color: black;
  overflow: hidden;
  white-space: pre;
}

.halfStyle:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  content: attr(data-content);
  overflow: hidden;
  color: #f00;
}

ログイン後にコピー

パート 2: テキストの自動スタイル化

複数の場合文字またはダイナミックテキストの場合、JavaScript はプロセス:

// jQuery for automation
jQuery(function($) {
  var text, chars, $el, i, output;

  // Iterate over text elements
  $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span>

ログイン後にコピー

解決策:

私たちの解決策には以下が含まれます: