Posts tagged

HTML Reversed Ordered List /

I’ve learned that you can reverse the sequence of numbers in an HTML ordered list (<ol>) with the HTML5 attribute, reversed. As in:

<ol reversed>
    <li>French hens</li>
    <li>Partridge in a pear tree</li>

Which gives:

  1. French hens
  2. Turtledoves
  3. Partridge in a pear tree

There is also the attribute start to specify the start value, useful to resume the numbering of a list after it is interrupted by another block element.

PDFs as Images /

PDFs are vector documents but are also valid images sources in modern browsers.

I had been looking for a solution to display PDFs in an HTML page, rather than just provide a link to view or download it separately. Browsers used plugins in the past, and there are some good JavaScript solutions to display multi-page PDFs like Mozilla’s pdf.js. But my need at the time was simple. I wanted a visual of the PDF but I didn’t want to convert the PDF to a destructive image format. I was pleased to learn that I could make a PDF file the src of an <img> tag in HTML.

Limitations: Only the first page of a PDF will be displayed inline. This restriction is according to the specs. And you cannot point to a specific page of a multi-page PDF document like you can with an anchor link (ex. <a href="....pdf#page=2>).

So this technique is good for one-page PDFs or to display the first page of a multi-page PDF as a preview image, linked to the full document. If you use a Markdown editor like Ulysses, know that you can similarly use a PDF as an image.