접근성을 유지하면서 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>

로그인 후 복사

해결책:

저희 솔루션에는 다음이 포함됩니다.