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

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

enter image description here

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

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

<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>

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

Ответы

Ответ 1

Вам нужно добавить теги <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 вокруг каждого блока сообщений в шаблоне заметок.

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

Ответ 2

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

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

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