Previously known as ‘coming up next!’
Estimated reading time: five minutes
- Tagged with
- Middleman
- next
- prev
Sequentially linking web documents, a simple mark-up and styling example with some wooly logical thinking.
One way or another, I’m gonna find ya’
Background
The next
and prev
rel
link attributes are most useful for documents that fall into a nice narrative sequence such as the chapters in a book. However, they also make a popular linear navigation aid for chronologically ordered articles such as blogs—which is the example that I am using here.
Which where? When what?
In determining the order of next and previous there is little to recommend either choice, but I am following the convention that next is newer and previous is older. Also that previous comes first in the document and displays left, as in going back through a book or back along a line of text and that next comes after and displays right as in moving forward through a book or along a line of text.
Mark-up
Next and previous links are marked-up in an un-ordered list and use the rel
and accesskey
attributes. An additional link to a list of all the documents in the sequence is given in between the next
and prev
links:
<div role="navigation" class="page-navigation">
<ul>
<li><a href="older-document.xhtml" rel="prev" accesskey="p" title="Previous article: Title of older document">Title of older document</a></li>
<li><a href="archives.xhtml">All documents</a></li>
<li><a href="newer-document.xhtml" title="Next article: Title of newer document" rel="next" accesskey="n">Title of newer document</a></li>
</ul>
</div><!-- End role=navigation -->
The access key attribute values follow the convention SAK2014: Standard Access Keys 2014
The title attribute is set and explicitly states whether the link is next or previous. This is for non-visual browsers but also if you were to hide the text of the link and use only a symbol instead, it could describe the link via a tooltip.
In both the first and last documents of a sequence, there will only be one link (either previous or next—depending on your logic).
It could be considered that a list element is overkill. Whilst I do not subscribe to the radical no item list agendum (The ul
element on W.3.C.’s H.T.M.L.5 Recommendation), I am existentially comfortable with the notion that a list of one item is nevertheless a list. It may have dwindled down from a mighty tally; be an unlimited catalogue in initial, singular, or embryonic form; or it might just be a list of things that encompasses but one thing.
Generating in a Middleman static blog
I use the following code to generate the above mark-up in a middleman static website (I’m presupposing that you have the middleman-blog
extension):
<% if current_article.previous_article || current_article.next_article # if any links %>
<div role="navigation" class="post-navigation>
<ol">
<% end # if any links %>
<% prev_article = current_article.previous_article %>
<% if prev_article %>
<li><%= link_to prev_article.title, prev_article.url, title: "Previous article: #{prev_article.title}", rel: 'prev', accesskey: 'p' %></li>
<% end # if prev article %>
<li><a href="<%= url_for "/archives.xhtml" %>">All articles</a></li>
<% next_article = current_article.next_article %>
<% if next_article %>
<li><%= link_to next_article.title, next_article.url, title: "Next article: #{next_article.title}", rel: 'next', accesskey: 'n' %></li>
<% end # if next article %>
<% if current_article.previous_article || current_article.next_article # if any links %>
</ol>
</div><!--End post navigation-->
<% end # if any links %>
Visual and print styling
Visual
@charset utf-8;
body {
line-height : 1.4;
padding : 0 1.4em
}
.page-navigation {
position : relative
}
.page-navigation a {
width : 33%
}
.page-navigation a,
.page-navigation a[rel=next]::after,
.page-navigation a[rel=prev]::before {
position : absolute;
top : 0
}
.page-navigation li,
.page-navigation ul {
display : inline
}
.page-navigation a[rel=next] {
right : 0%;
text-align : right
}
.page-navigation a[rel=prev] {
left : 0
}
.page-navigation a:not([rel=next],[rel=prev]) {
left : 33%;
text-align : center
}
.page-navigation a[rel=next]::after {
content : " ☞";
right : -1.4em
}
.page-navigation a[rel=prev]::before {
content : "☜ ";
left : -1.4em
}
View an example of the screen styling and mark-up on Codepen
Navigation serves no purpose in a printed version of the document so for the print stylesheet add:
.page-navigation {
display : none
}