CSS と JavaScript で半分の文字をスタイルするにはどうすればよいですか?

半分の文字のスタイル化の謎: CSS と JavaScript の冒険

Web の美学の領域では、完璧を追求することがよくあります。私たちは型破りな解決策を模索します。そのような謎の 1 つは、キャラクターのほんの半分をスタイリングするというとらえどころのない課題です。芸術的表現であれ、機能的目的であれ、単一のキャラクターの視覚的領域をどのように分割するかという問題は、長年にわたり開発者の興味をそそってきました。

部分的なキャラクター スタイリングの探求

数え切れないほどの検索と実験を通じて、数え切れないほどの開発者が、スクリーン リーダーのアクセシビリティとそのセマンティックな意味を維持しながら、文字の半分を選択的にスタイル設定できるエレガントな CSS または JavaScript ソリューションを見つけようと試みてきました。

単一文字の CSS ソリューション

単一文字の場合、疑似要素の賢明な使用に依存する純粋な CSS ソリューションが存在します。

<code class="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;
}</code>

::疑似要素の前に、文字の左半分を覆う透明なオーバーレイを作成し、必要な半分だけを色で表示します。

ダイナミック テキスト用の JavaScript ソリューション

動的テキストまたは複数の文字の場合、JavaScript 自動化を採用します。

<code class="javascript">// Iterate over all occurences of 'textToHalfStyle' class
$('.textToHalfStyle').each(function(idx, el) {
  var text = $(el).text(),
      chars = text.split('');

  // Set screen-reader text
  $(el).html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

  var output = '';

  // Loop through all characters
  for (i = 0; i < chars.length; i++) {
    // Create a styled span for each character
    output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
  }

  // Write to DOM
  $(el).append(output);
});</code>

JavaScript は、各文字のスタイル付きスパンの作成を自動化し、望ましい半文字効果を提供しながらスクリーン リーダーのアクセシビリティを維持します。

結論

文字分割の探求は日常的なデザイン要件ではないかもしれませんが、これは、従来の方法で視覚要素を操作するための CSS と JavaScript の無限の可能性を示しています。かつては不可能だと考えられていました。このような探求に着手することは、Web 開発の限界を押し広げるだけでなく、デジタル クリエイティビティの領域における革新と探求を刺激することにもなります。

以上がCSS と JavaScript で半分の文字をスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。