Bionic Reading 및 "미니 라이브러리"

Bionic reading은 단락의 각 단어의 시작 문자를 강조하여 특히 난독증이 있는 독자의 가독성을 향상시키는 정말 흥미로운 아이디어입니다.



그것은 많은 독서 용도로 사용될 수 있는 매혹적인 개념이며 많은 사람들이 선호할 수 있는 것 같습니다. 공식 웹사이트는 텍스트 블록을 "바이오닉"스타일로 활성화하고 변경하기 위한 공식 API와 몇 가지 다른 도구를 광고하지만 Javascript로 이와 같은 것을 구현하는 방법을 알아보고 싶었습니다. 비슷한 것을 찾기 위해 NPM을 검색했지만 확실한 결과가 없었습니다.

그래서 저만의 작은 도서관을 만들었습니다.

장애물

그것에 대한 나의 자격은 HTML 문서에 있는 텍스트의 모든 단락(또는 지정된 선택기 또는 클래스)에 영향을 주는 대부분의 JS 라이브러리와 같은 드롭 앤 고 기능 또는 클래스를 만드는 것이었습니다. 이 특정 아이디어에는 고려해야 할 몇 가지 장애물이 있습니다.

원래 단락의 인라인 정적 크기를 유지하면서 각 단어의 첫 글자만 분리하려면 어떻게 해야 합니까?

강조된 문자가 원래 글꼴보다 최대 1픽셀 더 넓은 윤곽선과 거의 같은 글꼴이 되도록 스타일을 지정하려면 어떻게 해야 합니까?

이것을 CSS로 구현해야 합니까, 아니면 글꼴 모양을 완벽하게 나타내기 위해 Javascript로 구현해야 합니까?

의사 요소가 옵션입니까?

CSS를 사용한다면 어떤 속성을 사용하는 것이 가장 좋을까요?

text-shadow ?

font-weight ?

transform: translate() ?

웹 크롤러는 어떻게 이해합니까?

내 솔루션

저는 CSStext-shadow와 Shadow DOM을 사용하여 원래의 light DOM 콘텐츠와 자식으로 연결된 특정 스타일의 바이오닉 노드를 구분하는 솔루션을 찾았습니다. 기본적으로 text-shadow를 선택한 이유는 (Shadow DOM은 유연성을 위해 open이기 때문에) 외부에서 사용 및 변경될 가능성이 가장 높기 때문입니다. 또한 text-shadow는 사용된 글꼴의 정확한 충실도를 유지하기 때문입니다. 또한 text-shadow는 로드된 굵은 글꼴 두께의 가용성에 의존하지 않습니다.

이것은 여전히 ​​웹 크롤러에 색인 생성 가능으로 표시되지만 추가된 윤곽선을 계산된 글꼴과 정확히 동일하게 유지해야 하는 요구 사항으로 인해 HTML 노드를 추가하지 않고 도형에 추가하는 것이 불가능하지는 않더라도 훨씬 더 어려울 것입니다. Shadow DOM은 "light DOM"노드의 인덱싱 가능성에 여전히 영향을 미치지 않으면서 적어도 개발자가 읽을 수 있는 구별을 만듭니다.

class Bionic extends HTMLParagraphElement {
  constructor(elem){
    super();
    const root = document.createElement('bionic-reading');
    const shadow = root.attachShadow({mode: 'open'});
    const paragraph = document.createElement('bionic-reading');

    const elemStyle = window.getComputedStyle(elem)
    paragraph.style = elemStyle;
    paragraph.innerHTML = elem.innerHTML;

    root.classList.add('bionic');
    paragraph.classList.add('bionic');
    const style = document.createElement('style');
    style.textContent = `
      .bionic {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    `
    elem.style.position = "relative"
    root.style.color = "transparent";
    paragraph.style.margin = "0";

    paragraph.innerHTML = paragraph.innerHTML.split(' ').map(word => {
      return `<span style="text-shadow:-2px 0 0 ${elemStyle.color};">${word[0]}</span>` + word.substring(1)
    }).join(' ')
    shadow.appendChild(style)
    shadow.appendChild(paragraph)
    this.result = root
  }
}

function bionic(selector = 'p'){
  customElements.define('bionic-reading', Bionic, { extends: selector });
  document.querySelectorAll(selector).forEach(elem => {
    let bionic = new Bionic(elem);
    elem.parentNode.insertBefore(bionic.result, elem.nextSibling);
    elem.appendChild(bionic.result);
  })
}

bionic()

기본적으로 자식 Shadow DOM을 만들고 light DOM 노드의 절대적으로 배치된 복제본을 추가한 다음 각 단어의 모든 첫 글자에 대해 span를 생성하는 text-shadow를 주입합니다. 강조된 문자가 완벽하게 정렬되도록 문자 간격 및 색상 구성과 같은 텍스트 기반 스타일을 유지하기 위해 light DOM의 스타일이 상속됩니다.
가벼운 DOM 노드가 상대적으로 배치되어야 합니다(일반적으로 시맨틱 단락을 사용하는 방식에서 static와 차이를 만들지 않아야 함).

잠재적으로 이 도구를 NPM 패키지로 확장하면 사용된 CSS 속성( property ), 무거움, 문자 패딩, HTML 및/또는 클래스 선택기를 변경하는 'text-shadow' | 'transform' | 'filter' | font-weight 값과 같은 몇 가지 옵션 매개변수를 쉽게 허용할 수 있습니다. .

당신이 무슨 생각을하는지 제게 알려주세요!