NSFW: Not Safe For Work

Really simple summary

If you are making a link to a site that you think is not safe for work, add:

class="nsfw"

as an attribute. Your link should end up looking like this:

<a href="http://example.org" class="nsfw">Example</a>

Finally, edit your ‘head’ element to look like this:

<head profile="http://tommorris.org/profiles/nsfw">
...

If there is already a URL in the profile attribute, add the new one on the end and separate it with a space:

<head profile="http://gmpg.org/xfn/11 http://tommorris.org/profiles/nsfw">

If this has piqued your interest, consider making your pages posh, spruce them up with microformats and other fancy Semantic Web things.

Transformation

The key that makes it all work – nsfw.xsl

Background

There has been some discussion in the microformats community of an ‘nsfw’ standard.

NSFW is a widely used abbreviation online to refer to links (usually on weblogs) that the reader is cautioned over. Usually these are things which contain pornographic or violent graphical imagery that people should be wary of clicking on at work. See UrbanDictionary entry on nsfw, Reddit’s NSFW category and Wikipedia.

Sometimes the author of the page does not mean that the reader will find it offensive, but that the reader’s employer or other kind of institutional superior may find it problematic, although in many cases shock sites may also be marked NSFW.

Red herring cultural difference

In response to the idea of formulating rel-nsfw or class-nsfw (depending on how one reads the HTML standard, ‘nsfw’ may be considered not to be a relationship of the linked document with the current document – following common usage of XFN, rel-tag and rel-nofollow, it can be interpreted to be so), some people thought that the idea of an nsfw microformat would be hampered by the problem of cultural difference.

The argument went something like this. What is considered ‘safe’ or ‘not safe’ differs in other countries and cultures, and why should we try to codify what is meant by the phrase?

This is a red herring. Microformats and other semantic technologies can imply meaning, or it can leave meaning deliberately vague. It is up to the user and the technology they use to make decisions on the basis of the level of meaning delivered.

Colin Barrett’s post on uf-discuss is of a similar opinion: This is just silly. The microformat spec wouldn’t specify what things are suitable for work.

An example of this is the ‘knows’ object property in FOAF:

We take a broad view of ‘knows’, but do require some form of reciprocated interaction (ie. stalkers need not apply). Since social attitudes and conventions on this topic vary greatly between communities, counties and cultures, it is not appropriate for FOAF to be overly-specific here.

It also uses the lovely phrasing of why they dismissed an earlier design with more properties – it was bringing an inappropriate air of precision to an intrinsically vague concept.

Do this do that

Another thing that people brought up was that you should use a rel-tag to mark a link as being tagged nsfw.

That doesn’t satisfy the simplicity criterion though. If you are hand-coding, and you want to just write class="nsfw" (or rel="nsfw") on a link, the alternative is to use xFolk:

<span class="xfolkentry">
<a class="taggedlink" href="http://foo.com">foo.com</a>
<span class="meta">(<a href="http://en.wikipedia.org/wiki/NSFW" rel="tag">NSFW</a>)</span>
</span>

Which is quite a long-winded version of saying:

<a href="http://foo.com" class="nsfw">foo.com</a>

The former is fine if the code is being generated automatically, but absolutely not fine if someone is intended to type it in by hand.

The vague concept

Before we proceed, we should acknowledge a deliberately and intrinsically vague definition of NSFW.

NSFW simply means “the author of this page considers the target of this link may contain content which the reader or others within certain proximities of the user may find either offensive or inappropriate”. It is also true for NSFW that readers should exercise caution, that the lack of an NSFW determination does not guarantee safety, nor does it imply anything other than a subjective evaluation on the part of the author.

What is the actual problem

The problem is that sometimes you click on links that you really don’t want to click on, and sometimes that action can cause people you have a relationship with to consider your action to be illegal, immoral, inappropriate or worthy of some kind of disciplinary action. This may be that a pornographic movie starts playing and the whole office hears the soundtrack, or it might be that your mother reads your blog and doesn’t want to click on the link to Rotten or Tubgirl (both very NSFW, btw).

You do not wish to censor those sites, but allow people to view them, so long as they have a warning that they may be inappropriate.

If these links were marked up with an nsfw classname or rel attribute, it would be possible to use CSS or scripting to provide assistance to users. For instance, you may choose to style NSFW links with a graphical or colour-based warning symbol. Another approach is to use JavaScript to make a ‘lightbox’ or warning system so that when the user clicks on the link or hovers over it, some visual change is made to the browser window to warn users – maybe a little pop-over box will warn the user that they have clicked on an NSFW link.

This page is a GRDDL profile. This means that if you add the URI of this page to the profile attribute of your HTML and XHTML pages, GRDDL-compliant User Agents (list) can glean extra semantic information from patterns used within HTML pages. For more information, please see the GRDDL Primer.

Help protect GRDDL! Despite the existence of the GRDDL specification and it's status as a W3C Recommendation, the HTML WG and the WHATWG have removed the profile attribute from the HTML 5 specification. Please start using GRDDL and add usage examples and profiles to the GetSemantic wiki.

Tom Morris