{
  "id": "91a534a72394",
  "url": "http://www.tbray.org/ongoing/When/201x/2011/04/01/Straight-Right",
  "title": "Reshaping",
  "note": "\nFor the first time in years, I’m working on changing the look of this here\nblog. I’ve been bored with it in recent\nyears, then Blaine Cook’s\nBeautiful\nLines pushed me over the edge.  As of today, if you’re reading this at\ntbray.org rather than in one feed\nreader or another, the text is justified on both sides and hyphenated as\nnecessary.  There are side-effects, and I’m\nnot sure I’m 100% happy with the results. I am sure there’s lots more work to\ndo.\n\nWhat Blaine Said\nHis piece makes three arguments:\n\n\nNow we have wide variety in the pixel density on the screens we use,\nextra work is required to come up with density-independent designs.\n\nRight-justified text should be used because “Ragged right is an\nabomination”.\n\nHyphenation, which has long been used in conjunction with right\njustification, is now easily achievable with good-quality results.\n\n\nLet’s take up Blaine’s points in reverse order.\n\nHyphenation\nIn this case I agree 100%.\nHyphenator.js is trivial to\ninstall and seems to Just Work; as I consider its results, I have seen very\nlittle so far that offends my eye.  Also, the architecture is pleasing;\nit makes perfect sense to run this sort of publishing busywork on the\nWeb’s billions of underworked client systems, rather than on its millions of\noften-overworked servers.\n\nBut there are a few little issues. \nThe software works by peppering the text with soft-hyphen characters in all\nthe places where you might want to break words, and then leaves the work\nof doing the hyphenation to the browser.\n\nThis character is Unicode U+00AD SOFT HYPHEN. Hyphenator.js wants to use the\nHTML escape ­, which caused problems with my XML-based\npublishing system that doesn’t know HTML escapes.  I was going to use\n­ but then realized that JavaScript literals are\nsupposed to be UTF-8, so I put the literal character right there in the\nJavaScript source and that works fine.\n\nNext, you have to consider the effect of having all those invisible\nsoft-hyphens littering your deathless prose.  Hyphenate.js does some magic\nthat means when you copy text out of the browser, the soft-hyphens don’t come\nwith it.\n\nAlso, consider the effect on in-browser search.  Type Command-F or\nControl-F and search for “architecture”.  Firefox or Chrome can find it, but\nSafari can’t.  I suspect that this one should be easy to crush once it comes\nto Apple’s attention.\n\nOf course, the only reason to hyphenate is to make justification work\nbetter.  In the publishing-tech community where I spent years of my\nprofessional life, we used to just say “H&J”.\n\nJustification\nNothing to it; insert\ntext-align: justify; appropriately in your CSS and there you go.  I\ndo notice some subtle but obvious-to-the-eye differences in the justification\nalgorithm from one browser to another.  The ragged-right “abomination” is\nhistory.\n \nBut I’m wondering whether it really was that bad.  I’m aware that there’s\nresearch out there studying the effect of various techniques including\nkerning and leading and H&J.  But I couldn’t find it just now.\n\nPersonally, I like justification more and more as the columns get narrower\nand narrower; in book-length lines, I find ragged right to be sort of\nappealing.  On the other hand, in actual real books designed by actual real\nprofessional book designers, justification is pretty universal.\n\nI seem also to remember that narrow columns, in the style of\nnewspapers, were found more readable.  But then why are book-length texts not\nformatted that way?  I’m sure that somewhere on the Web there’s a high-quality\nprofessional introduction to these issues.  On balance, I like the way that \nongoing looks all squared-up.  But that may not last.\n\nOn Lines\nWhich leads to Blaine’s first point, about density-independence and line\nlengths. He posted nice clever code that does \ncalculations with the goal of arranging that each line has more or less the\nsame number of characters; then you get to have an amusing argument what the\nright number is.\n\nThis code doesn’t just drop in; it needs to hook into\nyour page layout at just the right places. So it took a\nbit of quality Firebug time to get it running.\n\nThen I took it out again.  The layout here at ongoing is “liquid”, meaning it grows or\nshrinks, within reason, should the browser be resized.  I found the effect\noverly twitchy and, the more I thought about it, the more I didn’t believe\nthat number-of-characters-per-line is the right invariant.\n\nWhen we routinely use displays whose dots-per-inch vary from \nunder 100 to over 300, it\nseems reasonable to worry about resolution-independence in your type\ndesign.\n\nBut maybe not.  I think I smell an abstraction leaking.\nWhen I say font-size: 0.95em;, I’m thinking that it’d be better\nif I left it to the browser to figure out how many pixels make up the best \n“em”, bearing in mind the physics of the display.\n\nHaving said all that, I widened the center-content area on the blog here,\nand increased the size to that 0.95em quoted above.  The effect, I think, is\nmore book than newspaper, which feels right to me.\n\nStill To Do\nI set up the basic CSS layout of this page between 2003 and 2006, stealing\nmostly from\nEric Meyer.  It was bleeding-edge then but is kinda mouldy and\nold-fashioned now, and doesn’t handle really wide browser windows nearly as well\nas I’d like.  So I’ll have to fix that.\n\nAnd then there’s fun part: fonts!  I’ve been offering readers the\nchoice of\nGeorgia and\nVerdana for a long time.\nThose were probably sensible options back in 2003. But\nthat was then, this is now. I’ve been following\nthe Typekit blog and glancing at\nGoogle Web Fonts and licking my\nlips a bit.\n\nAlso, I’m increasingly loathing Georgia’s italics.\n\nIt looks like it’ll be straightforward to shift the fonts in\nthis space.\nThat’s after I’ve picked new typefaces; a prospect that, frankly,\nintimidates me.  I’m not even sure how to start thinking about it, but I’m\npretty sure that I’ll have fun once I do.\n\nBy the way, I shifted this in over a day ago and mostly nobody noticed.\nWhich is a good thing.  Oh, and thanks to Blaine!\n\n",
  "voice": "excerpt",
  "saved": "2011-04-01T19:00:00Z",
  "host": "tbray.org",
  "kind": "page",
  "tags": [],
  "record": "https://links.thingelstad.xyz/links/91a534a72394/",
  "markdown": "https://links.thingelstad.xyz/links/91a534a72394.md",
  "issues": [],
  "connections": {
    "same_host": {
      "count": 53,
      "page": "https://links.thingelstad.xyz/hosts/tbray.org/",
      "nearest": [
        {
          "id": "66c2519158e7",
          "title": "On Books",
          "url": "http://www.tbray.org/ongoing/When/201x/2010/09/26/On-Books",
          "record": "https://links.thingelstad.xyz/links/66c2519158e7/"
        },
        {
          "id": "e00a9eba94c4",
          "title": "Three Mobile-Software Rules",
          "url": "http://www.tbray.org/ongoing/When/201x/2010/10/30/Three-Android-Software-Rules",
          "record": "https://links.thingelstad.xyz/links/e00a9eba94c4/"
        },
        {
          "id": "0ab0f7c53483",
          "title": "What Android Is",
          "url": "http://www.tbray.org/ongoing/When/201x/2010/11/14/What-Android-Is",
          "record": "https://links.thingelstad.xyz/links/0ab0f7c53483/"
        },
        {
          "id": "05b07af1b1ea",
          "title": "Things about Blogging",
          "url": "http://www.tbray.org/ongoing/When/201x/2011/03/07/BNotes",
          "record": "https://links.thingelstad.xyz/links/05b07af1b1ea/"
        },
        {
          "id": "c86e4afe2f51",
          "title": "A New HTTP Status Code for Legally-restricted Resources",
          "url": "http://www.tbray.org/tmp/draft-tbray-http-legally-restricted-status.html",
          "record": "https://links.thingelstad.xyz/links/c86e4afe2f51/"
        }
      ]
    },
    "same_week": {
      "count": 31,
      "nearest": [
        {
          "id": "cfd7ea71d4bd",
          "title": "helvetica - Google Search",
          "url": "http://www.google.com/search?q=helvetica",
          "record": "https://links.thingelstad.xyz/links/cfd7ea71d4bd/"
        },
        {
          "id": "b758b1cad960",
          "title": "altercation/solarized at master - GitHub",
          "url": "https://github.com/altercation/solarized",
          "record": "https://links.thingelstad.xyz/links/b758b1cad960/"
        },
        {
          "id": "c9f164a8f950",
          "title": "coffee roasting, the debut",
          "url": "http://lacocinadedavid.wordpress.com/2008/06/06/coffee-roasting-the-debut/",
          "record": "https://links.thingelstad.xyz/links/c9f164a8f950/"
        },
        {
          "id": "997d17fe8cf0",
          "title": "Google's recipe for recipes",
          "url": "http://www.roughtype.com/?p=1470",
          "record": "https://links.thingelstad.xyz/links/997d17fe8cf0/"
        },
        {
          "id": "5454b0a7c60f",
          "title": "Roots WordPress Theme",
          "url": "http://roots.io/",
          "record": "https://links.thingelstad.xyz/links/5454b0a7c60f/"
        }
      ]
    },
    "mentions": [],
    "mentioned_by": [],
    "saved_twice": []
  },
  "elsewhere": {
    "wayback": "https://web.archive.org/web/*/http://www.tbray.org/ongoing/When/201x/2011/04/01/Straight-Right"
  }
}