Firefox 리더보기는 어떻게 작동합니까?
요약
웹 페이지를 만들 수있는 기준을 찾고 있고 사용자가 원하는 경우 Firefox Reader보기에 표시 될 것인지 [공정하게] 확신합니다 .
일부 사이트에는이 옵션이 있습니다. 더 많은 텍스트를 가진 일부는 약간의 텍스트를 가진 다른 것 보다이 없습니다. 예를 들어 Stack Overflow는 Reader View에서 답변이 아닌 질문 만 표시합니다.
질문
Firefox를 38.0.1에서 38.0.5로 업그레이드하고 ReaderView라는 새로운 기능을 찾았습니다.이 기능은 "페이지 혼란"을 제거하고 텍스트를 쉽게 만드는 기능입니다. Readerview는 특정 페이지에서 클릭 가능한 아이콘으로 주소 표시 줄의 오른쪽에 있습니다.
이것은 괜찮지 만 프로그래밍 관점에서 "독자보기"가 어떻게 작동하는지, 어떤 페이지에 어떤 기준이 적용되는지 알고 싶습니다. 나는 명확한 답변이없는 Mozilla Firefox 웹 사이트를 탐색했습니다 (내가 서비스 모든 종류의 프로그래밍 답변도 그렇습니다). Googled / Binged는 물론이고 Firefox 애드온에 대한 참조와 함께 돌아 왔습니다-이것은 애드온이 아닙니다 그러나 새로운 Firefox 버전의 주요 부분입니다.
나는 readerview가 HTML5 사용하고를 <article>내용 을 추출한다고 가정 했지만 이것은 <article>HTML5 태그 를 사용하지 않거나 유사한 HTML5 태그 를 사용하지 않는 위키 백과 작동하기 때문에에서 오는가 않고 대신 readview가 특정 <div>의를 추출 하여 단독으로-display합니다. 이 기능은 wikipedia와 같은 일부 HTML5 페이지에서 작동하지만 다른 페이지에서는 작동하지 않습니다.
Firefox ReaderView가 실제로 어떻게 작동하고 웹 사이트 개발자가 작업을 어떻게 사용할 수 있습니까? 또는이 정보를 사용할 수있는 위치를 사용할 수있는 정보를 알려주세요. 그래서 올바른 방향을 알려주겠습니까?
<p>보기에서보고자 리더하는 텍스트 주위 에 적어도 하나의 태그 가 필요 하고 텍스트 안에 7 개 단어로 된 516 자 이상이 필요합니다.
예를 들어이 ReaderView를 트리거합니다.
<body>
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</body>
https://stackoverflow.com/a/30750212/1069083 에서 내 예를 참조하십시오.
GitHub의의 코드, 오늘 아침 통해 읽기, 프로세스 요소가 동반 할 가능성 순서로 나열되는 페이지입니다 -와 <section>, <p>, <div>, <article>목록의 맨 위에 (즉, 대부분).
그런 다음 각 "노드"에는 노드에 적용되는 쉼표 수 및 클래스 이름과 같은 항목에 점수가 부여됩니다. 그것은 점수가 감소하는 것처럼 보이는 다소다면적인 프로세스입니다. "노드"의 하위 부분에있는 점수는 노드 전체의 점수에 반영됩니다. 즉, 상위 요소에는 모든 하위 요소의 점수가 포함되어 있습니다.
이 점수 값은 Firefox에서 HTML 페이지를 "페이지보기"할 수 있는지 여부를 결정합니다.
점수 값이 Firefox 또는 가독성 기능에 의해 설정되었는지 확실하지 않습니다.
Javascript는 실제로 링크 내 장점이있는 다른 사람이 Richard ( https://github.com/mozilla/readability )가 한 제공을 확인 하고 더 철저한 답변을 제공 할 수 있는지 확인해야합니다 .
내가 보지 못했지만 예상했던 것이 하나 <p>또는 <div>(또는 기타) 관련 태그 의 텍스트 콘텐츠 양을 기준으로 한 점수였습니다 .
이 질문이나 답변에 대한 개선 사항이 있으면 공유하십시오 !!
수정 : 페이지 텍스트 콘텐츠가 유효 할 때 요소 내 <div>또는 <figure>태그 (HTML5)의 이미지가 <p>리더보기에 유지되는 광고 시청.
나는 Readability.js GitHub 저장소 에 대한 Martin의 링크를 따라 가고 소스 코드를 보았습니다. 여기에 내가 만든 것입니다.
알고리즘은 단락 태그와 함께 작동합니다. 우선, 페이지의 내용이 아닌 부분 (예 : 양식 등)을 부분적으로 제거합니다. 그런 다음 페이지의 단락을 할당보고 내용에 따라 점수를 할당합니다. 쉼표 수, 내용 길이 같은 항목에 점수를 부여합니다. 25 자 앞으로의 단락은 즉시 삭제됩니다.
점수는 DOM 트리를 "버블 업"합니다. 각 단락은 점수의 일부를 모든 부모 노드에 추가합니다. 직계 부모는 전체 점수를 전체에 추가하고 조부모는 절반 만, 증조부모는 1/3 등으로 추가합니다. 의 위에. 이를 통해 알고리즘은 주요 콘텐츠 섹션이 될 수있는 상위 수준 요소를 설치할 수 있습니다.
이것은 Firefox의 알고리즘 일 뿐이지 만 Firefox에서 잘 작동하면 다른 브라우저에서 잘 작동 할 것입니다.
독자적인 독자보기 알고리즘이 웹 사이트에서 작동 광고 페이지의 콘텐츠가 많은 섹션을 노출해야합니다. 즉, 페이지에서 콘텐츠가 많은 노드가 알고리즘에서 높은 점수를받습니다.
따라서 다음은 알고리즘의 관점에서 페이지 품질을 개선하기위한 몇 가지 경험 규칙입니다.
- 콘텐츠에 단락 태그를 사용하십시오! 많은 사람들이
<br />태그 를 선호하여 간과하는 경향이 있습니다 . 비슷해 보일 수 있다고 많은 콘텐츠 관련 알고리즘 (Reader View 아니라)에 크게 의존합니다. - 을 사용 HTML5 마크 업에 의미 론적 요소, 같은
<article>,<nav>,<section>,<aside>. (질문에서 언급했듯이) 유일한 기준은 콘텐츠의 다른 섹션을 구분하기 위해 페이지를 읽는 컴퓨터 (독자보기 아니라)에 매우 중요합니다. Readability.js는이를 사용하여 중요한 콘텐츠를 포함 할 가능성이있는 노드를 추측합니다. <article>또는<div>요소 와 같은 하나의 컨테이너에 기본 콘텐츠를 래핑합니다 . 현재 그 안에있는 모든 단락 태그에서 점수를 받고 있습니다.- 콘텐츠가 밀집된 영역에서 DOM 트리를 얕게 유지하십시오. 콘텐츠를 분할하는 요소가 많으면 알고리즘의 삶이 더 어려워집니다. 콘텐츠가 많은 단락의 부모로 눈에 여러 개의 단락이 있습니다. 낮은 점수로.
참고 URL : https://stackoverflow.com/questions/30661650/how-does-firefox-reader-view-operate
'ProgramingTip' 카테고리의 다른 글
| src와 ImageView의 배경의 차이점은 무엇입니까 (0) | 2020.11.08 |
|---|---|
| css 속성 값의! 기본값은 무엇을 의미합니까? (0) | 2020.11.08 |
| “require (x)”와 import x의 차이점 (0) | 2020.11.08 |
| L1 캐시 미스 비용은 얼마입니까? (0) | 2020.11.08 |
| std :: string을 파일에 쓰는 방법? (0) | 2020.11.08 |