Статьи

Обработка сносок и ссылок в HTML5

Январь 2, 2019

В этом посте рассматриваются варианты обработки сносок и ссылок в HTML. Затем он представляет библиотеку, которая поможет вам справиться с ними.

Требования

Обработка сносок и ссылок сопровождается несколькими требованиями:

  • На экране нужно, чтобы текст сноски был как можно ближе к номеру, указывающему на сноску. Какое бы решение вы ни выбрали, оно также должно работать на сенсорных устройствах. Следовательно, подход только наведения не возможен.
  • В печати также должны быть указаны сноски. Следовательно, решение только для всплывающей подсказки не является приемлемым.
  • Наконец, все должно изящно ухудшаться, если JavaScript отключен.

Рекомендации по спецификации HTML5 для сносок

Спецификация HTML5 дает несколько советов о том, как форматировать сноски.

Короткие встроенные аннотации: атрибут title.

    <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
    <p>
    <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'"
    >Watcha</span> mean, miss?
    <p>
    <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
    <p>
    <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
    closing for lunch</span>.

Более длинные аннотации: двунаправленные ссылки через <a>:

    <p> Announcer: Number 16: The <i>hand</i>.
    <p> Interviewer: Good evening. I have with me in the studio tonight
    Mr Norman St John Polevaulter, who for the past few years has been
    contradicting people. Mr Polevaulter, why <em>do</em> you
    contradict people?
    <p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
    <p> Interviewer: You told me you did!
    ...
    <section>
     <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
     but paradoxically if it were true he could not say so without
     contradicting the interviewer and thus making it false.</p>
    </section>

 

Подсветка текущей активной сноски в стиле Википедии

CSS pseudo-selector: target позволяет стилизовать HTML-элемент, идентификатор которого совпадает с идентификатором фрагмента страницы:

    li:target {
        background-color: #BFEFFF;
    }

Таким образом, если URL-адрес страницы заканчивается #explanation, тогда будет выделен следующий элемент списка:

    <li id="explanation">It works like this: ...</li>

Использование библиотеки html_footnotes

Вы можете скачать html_footnotes на GitHub и попробовать его в Интернете.

Терминология: аннотация либо сноска или ссылка (цитата). Маркеры в основном тексте, относящиеся к этим аннотациям, называются указателями аннотаций .

  • Указатель сноски это число , записанное в скобках. Пример: (1)
  • Указатель ссылки является числом , записанным в квадратных скобках. Пример: [1]

Активация библиотеки . Библиотека состоит из CSS для стилизации аннотаций и указателей, а также из JavaScript, который выполняет постобработку HTML, поэтому требуется меньше кода.

    <link rel="stylesheet" href="footnotes.css" type="text/css">
    <script src="footnotes.js"></script>

Сноски . Библиотека обрабатывает HTML-код так, чтобы указатели сносок форматировались как верхний индекс и становились ссылками, которые при щелчке по ним отображали текст встроенной сноски.

    You can use an IIFE<a class="ptr">(1)</a> to avoid the
    global namespace<a class="ptr">(2)</a> being polluted.
    ...
    
    <h2>Footnotes</h2>

    <ol id="footnotes">
        <li>IIFE is an acronym for Immediately-Invoked Function Expression.</li>
        <li>The global scope is reified as an object in JavaScript.</li>
    </ol>

Ссылки: Справочные указатели обрабатываются и становятся ссылками. Библиотека также добавляет идентификаторы к элементам списка ссылок. Из-за соответствующего CSS, элемент списка будет выделен и прокручен, если нажать на указатель.

    JavaScript has many functional language constructs <a class="ptr">[1]</a>.
    For example: consult <a class="ptr">[2]</a> for an introduction to closures.
    ...
    
    <h2>References</h2>
    
    <ol id="references">
        <li><a href="http://en.wikipedia.org/wiki/Functional_programming"
        ><i>Functional programming</i></a>. In <i>Wikipedia</i>.
        Retrieved 2011-12-03.</li>
        
        <li>Douglas Crockford, <i>JavaScript: The Good Parts</i>.
        O’Reilly. 2008-05-16.</li>
    </ol>

Источник: http://www.2ality.com/2011/12/footnotes.html

62
Share: