Оптимизируйте веб-сайт, чтобы показать читателю представление в Firefox

Firefox 38.0.5 добавил "Просмотр читателей" в адресную строку:

Но не все сайты получают этот значок, он появляется только при обнаружении читаемой страницы контента. Так как мне включить это для моего сайта?

Я пробовал печатать медиа и дополнительную таблицу стилей для просмотра, но это никак не отразилось:

<html>
<head>
<style>
  @media print { /* no effect: */
    .no-print { display:none; }
  }
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!--  -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>

Какие фрагменты кода мне нужно добавить в исходный код моего сайта, чтобы этот значок книги стал виден посетителям моего сайта?

Источник

2 ответа

Решение

Вы должны добавить <div> или же <p> теги для достижения страницы для инициализации ReaderView.

Я создал простой HTML, который работает:

<html><head>
<title>Reader View shows only the browser in reader view</title>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
   <h1>H1 tags outside ot a p tag are hidden in reader view</h1>
   <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
   <p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</div>
</body>
</html>

Это минимум, необходимый для его активации. Это несколько многогранный процесс, где для текстовых блоков добавляются оценки.

Например, вы можете активировать представление читателя в программном обеспечении форума, если добавите <p>-Tag вокруг каждого блока сообщений в шаблоне просмотра сообщений.

Вот еще несколько деталей о механизме

Источник

Поскольку код стоит в ноябре 17 года, функция триггера (isProbablyReaderableтолько баллы p или же pre элементы и div элементы, содержащие хотя бы одного потомка br,

Небольшое упрощение оценки эвристики:

  • Для каждого элемента в ['p', 'pre', 'div > br']:
    • Если textContent длина> 140 символов, увеличение score от sqrt(length - 140)
  • если накопительный score > 20, возврат true
Источник
Другие вопросы по тегам