내 웹 사이트에서 iOS 5 Safari Reader를 활성화하는 방법은 무엇입니까?
iOS 5에서 Mobile Safari의 리더 기능은 어떻게 작동합니까? 내 사이트에서 어떻게 활성화합니까? 내 페이지의 어떤 콘텐츠가이 기능을 트리거하는 기사인지 어떻게 알 수 있습니까?
여기에 게시 된 많은 답변에는 잘못된 정보가 포함되어 있습니다. 다음은 몇 가지 수정 / 설명입니다.
<article>요소는 래퍼로 잘 작동; Safari Reader는이를 인식합니다. 내 사이트가 예 입니다.<body>또는 이외의 하나가있는 한 어떤 래퍼 요소를 선택하든 상관 없습니다<p>. 당신이 사용할 수있는<article>,<div>,<section>, 또는이 목적을 위해 의미 잘못된 요소, 같은<nav>,<aside>,<footer>,<header>, 또는<span>(!) 와 같은 인라인 요소도 있습니다.Reader가 작동하는 데 제목이 필요하지 않습니다. 다음은
<h*>Reader가 제대로 작동 하는 요소가 없는 문서의 예입니다 . http://mathiasbynens.be/demo/safari-reader-test-3
내 발견에 대한 자세한 내용을 여기에 게시했습니다. http://mathiasbynens.be/notes/safari-reader
이 알기 어려운 Reader 상태를 유발하는 원인을 파악하기 위해 iPhone에서 100 개 정도의 변형을 테스트했습니다. 내 결론은 다음과 같습니다.
다음은 내가 찾은 영향입니다.
- "리더"를 트리거하려는 기사에 약 200 개 이상의 단어 (또는 공백 포함 1000 자)가 있어야합니다.
- 내가 170 단어 미만일 때 독자는 절대 트리거되지 않았습니다. 180 ~ 190 개의 단어가있을 때 가끔 촉발되었지만.
<ol>또는<ul>(일반적으로 스토리를 포함하는 데 사용되지 않는) 와 같은 특정 요소 내부의 텍스트 는 200 단어에 포함되지 않습니다 (그러나 독자가 다른 이유로 트리거되는 경우 독자에게 표시됨).<div>또는 a와 같은 블록 요소에 200 개의 단어를 감싸는<article>것이 필요한 것 같습니다.
전체 공개를 위해 다음은 영향을 미치지 않는 것으로 나타났습니다.
- 헤더 사용 여부
- 텍스트를 감싸
<p>거나 자유롭게 흐르게 하든 - 구두점 (예 : 모든 마침표, 쉼표 등을 제거해도 영향이 없음)
기반으로하는 알고리즘이 p-Tag를 찾고있는 것으로 보이며 "."와 같은 구분 기호를 계산합니다. innerText에서. 포인트가 가장 많은 섹션 (div)이 포커스를받습니다.
참조 : http://lab.arc90.com/experiments/readability/
Reader-mode의 기반이되는 것 같습니다. 적어도 Safari는 Acknowledgements에서 속성을 지정합니다. 다음을 참조하십시오.
file : /// C : /Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html
Arc90 (가독성) Copyright © Arc90 Inc.
가독성은 Apache 라이선스 버전 2.0에 따라 사용이 허가됩니다.
이 질문 ( 웹 페이지에서 Safari Reader를 비활성화하는 방법 )에 자세한 내용이 있습니다. 여기에 복사 :
Safari에서 리더 옵션을 트리거하는 것과 그렇지 않은 것에 대해 더 많이 알고 싶습니다. 나는 그것을 비활성화하는 것을 구현할 계획이 없지만 기술적 인 연습으로 호기심이 많습니다.
다음은 몇 가지 기본적인 연주를 통해 지금까지 배운 내용입니다.
적어도 하나의 H 태그가 필요합니다. 문자 수만으로가 아니라 P 태그의 수와 길이로 이동합니다. 아마도 문장 나누기 '.'를 찾습니다. 및 기타 기준 Safari는 H 태그와 함께 다음과 같은 경우 'Reader'를 제공합니다.
P 태그 1 개, 2417 자 P 태그 4 개, 1527 자 P 태그 5 개, 1150 자 P 태그 6 개, 862 자 위 중 하나에서 1자를 빼면 '리더'옵션을 사용할 수 없습니다.
H 태그의 문자 수는 중요한 역할을하지만 위의 결과를 결정했을 때 슬프게도이를 인식하지 못했습니다. H 태그에 대해 20 개 이상의 문자를 가정하고 위의 결과 전체에서 수정되었습니다.
다른 흥미로운 것들 :
P 태그를 설정하면 개수 설정 표시에서 없음으로 제거되고 230ms 후에 Javascript로 표시되어 리더 옵션도 피했습니다.
누구든지 이것을 완전히 결정할 수 있다면 관심이 있습니다.
나는 이것으로 어려움을 겪고 있었다. 드디어 <ul>내 이야기 의 마킹과 비올라를 꺼냈다 ! 작동하기 시작했습니다.
나는 몸 주위에 포장지를 넣지 않았지만 우연히했을 수도 있습니다.
HTML5 기사 태그가 내 테스트에서 트리거하지 않습니다. 또한 오프라인 콘텐츠 (예 : 로컬 컴퓨터에 저장된 페이지)에서는 작동하지 않는 것 같습니다.
트리거하는 것처럼 보이는 것은 많은 텍스트가있는 많은 p가있는 div 블록입니다.
p 태그 이론은 좋은 것 같습니다. 다른 요소도 감지한다고 생각합니다. 6 개의 단락이있는 페이지 중 하나는 Reader를 실행하지 않았지만 4 개의 단락과 img 태그가있는 페이지는 실행했습니다.
또한 여러 페이지의 기사를 감지 할 수있을만큼 똑똑합니다. nytimes.com 또는 nymag.com의 여러 페이지 기사에서 사용해보십시오. 그것을 어떻게 감지하는지 알고 싶을 것입니다.
놀랍게도 HTML5 아티클 태그에 전혀 관심을 기울이지 않습니다. 특히 Safari 5가 CSS에서 아티클, 섹션, 탐색 등을 완벽하게 지원한다는 점을 감안할 때 실망 스럽습니다. 이제 div처럼 스타일을 지정할 수 있습니다. 블록 레벨 요소와 동일하게 작동합니다.
나는 정확히 그러한 목적을 위해 의미 론적 HTML5 라벨링을 준비하기 위해 기사 태그와 여러 내부 섹션 태그를 사용하여 사이트를 특별히 설정 했으므로 Safari 5가 Reader에이를 사용하기를 정말로 바랐습니다. 그런 운은 없습니다. 아마 이것에 대해 버그를 제출해야합니다. 실제로 페이지에있는 대부분의 h2 레벨 부제목을 완전히 무시하고, 각각 섹션으로 표시된 부분은 이전에 언급 한 기준을 준수하는 단일 div 만 표시합니다.
아이러니하게도 같은 사이트의 이전 버전은 기사, 섹션 또는 div 태그를 분리하지 않고 Reader에 표시 할 전체 본문을 인식합니다.
Firefox와 Chrome에는 iReader라는 유사한 플러그인이 있습니다. 다음은 소스 코드가있는 프로젝트입니다.
http://code.google.com/p/ireader-extension/
더 많은 것을 얻으려면 코드를 읽으십시오.
기사 게시 지침을 참조하십시오 .
읽기 및 구문 분석 방법에 대한 API는 다음과 같습니다. Readability Developer APIs . 참조 할 수있는 프로젝트가 이미 있습니다 : ruby-readability .
간략한 역사 : Apple의 Safari 5 브라우저에 Readability 라는 코드베이스가 내장 된 이후 Safari Reader 기능 은 모든 웹 페이지를 사용자 정의 가능한 읽기보기로 전환하는 간단한 Javascript 기반 읽기 도구로 시작되었습니다. 2009 년 초에 뉴욕에 기반을 둔 디자인 및 기술 상점 인 Arc90 (Arc90 Lab 실험) 에서 출시했습니다 . Amazon Kindle과 Flipboard 및 Reeder와 같은 인기있는 iPad 애플리케이션에도 포함되어 있습니다.
Safari Reader 기능과 유사한 정보 "폐기물"로부터 웹 사이트를 청소하는 알고리즘을 개발 중입니다. 가독성만큼 좋지는 않지만 멋진 기능이 있습니다.
smartbrowser.codeplex.com 프로젝트 페이지 에서 자세한 내용을 확인할 수 있습니다 .
참고 URL : https://stackoverflow.com/questions/2997918/how-to-enable-ios-5-safari-reader-on-my-website
'IT TIP' 카테고리의 다른 글
| "메모리 부족"이 복구 가능한 오류입니까? (0) | 2020.10.19 |
|---|---|
| SQL Server로 업데이트 선택 (0) | 2020.10.19 |
| Twitter Bootstrap에 jQuery가 포함되어 있습니까? (0) | 2020.10.19 |
| 원본에서 가져올 때 "git pull"명령의 차이점은 무엇입니까? (0) | 2020.10.19 |
| NameValueCollection의 foreach KeyValuePair? (0) | 2020.10.18 |