Custom stylesheet for George Orwell essay archive

Typography CSS for use with the Stylish browser extension to improve the readability of an online essay archive.

2 minute read

There’s an archive of George Orwell’s essays in English and Russian language at http://www.orwell.ru/library/essays. I found the archive last week when searching for a full-text version of Politics and the English Language (1946) to re-read, which contains Orwell’s famous six rules for clear writing. These rules are touchstones for writers or editors and feature in the introduction to The Economist’s style guide.

I found the essays difficult to read on a desktop browser due to the site’s typography:

  • Long line lengths spanning the full width of the browser
  • Justified paragraphs rather than left-aligned (ragged right)
  • Tight leading
  • A serif font

When reading long-form articles online, I prefer large sans-serif body text, constrained line lengths and leading between 1.3 and 1.5 ems. To improve the reading experience, I made a custom stylesheet with new typography for use with the Stylish browser extension. I’ve shared the stylesheet via userstyles.org and GitHub.

Before

Credit: http://www.orwell.ru/library/essays/politics/english/e_polit – click to view larger version

After

Credit: http://www.orwell.ru/library/essays/politics/english/e_polit with custom stylesheet – click to view larger version

Install via userstyles.org directory

  1. Add the Stylish extension to your browser. The extension is available for Chrome, Firefox, Safari and Opera.
  2. Visit https://userstyles.org/styles/141074/.
  3. Select Install with Stylish.
  4. View any essay under http://www.orwell.ru/library/essays/.
  5. The Stylish extension should prompt you that styles are available for the current site. Accept the prompt and add the styles.

Install manually

In Chrome the Stylish extension may not reliably prompt you that styles are available for the current site. Manually add the stylesheet as follows:

  1. Click the browser extension icon and select Create new style.
  2. Give the style a name.
  3. In stylish.css copy all of the styles that are inside the @-moz-document and url-prefix rules.
  4. Paste the styles in the Code 1 text field.
  5. In the Applies to settings choose URLs starting with from the drop-down menu.
  6. Enter http://www.orwell.ru/library/essays/ in the text field.
  7. Select the Save button.
comments powered by Disqus