{"id":2957,"date":"2020-04-19T10:02:01","date_gmt":"2020-04-19T17:02:01","guid":{"rendered":"http:\/\/thelawlers.com\/Blognosticator\/?p=2957"},"modified":"2020-04-19T21:31:45","modified_gmt":"2020-04-20T04:31:45","slug":"excellent-typography-in-web-pages","status":"publish","type":"post","link":"https:\/\/thelawlers.com\/Blognosticator\/?p=2957","title":{"rendered":"Excellent typography in web pages"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In a previous post<\/a> I wrote about the differences between typewriter quotes and real quotation marks, and how to do it right.<\/p>\n\n\n\n

I have received some nice feedback on that post.<\/p>\n\n\n\n

One person suggested that while it\u2019s great to use proper quotation marks in printed material, it is impossible<\/em> to get those same proper marks in web pages. Au to the contrary!<\/em> (as they say in French). HTML has an extensive library of proper punctuation marks as well as accented characters for central- and eastern-European languages (those based on the Roman alphabet).<\/p>\n\n\n\n

I read the New York Times<\/em> online (and in print on Sundays!). Its online presentation is an excellent example of typography and proper punctuation done right. Most other online publications pay attention to typography but let the apostrophes and other quotations fall victim to the horrible typewriter quotation marks. It\u2019s disturbing.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When I prepare these posts for WordPress,<\/em> I use proper quotation marks and apostrophes \u2013 even when I respond to an online comment. WordPress<\/em> allows me to use the keyboard commands to get these marks, making it much easier than putting in the HTML code for those marks.<\/p>\n\n\n\n

But, when constructing a web page with hard code, or even when using a program like Adobe Dreamweaver<\/em> that does much of the work for you, it\u2019s possible to insert the proper marks as you work. It\u2019s a bit of work, but it\u2019s logical. The handsome result is the reward for doing it right.<\/p>\n\n\n\n

So, let\u2019s say you\u2019re building a page of HTML code, and you need a proper apostrophe. In the code you should type:<\/p>\n\n\n\n

&rsquo;<\/pre>\n\n\n\n
Which results in a left-facing apostrophe, correct for most contractions and possessive applications.<\/p>\n\n\n\n
To get a single right-facing quote, perhaps for the opening of a quote-within-a-quotation phrase, you would type:<\/p>\n\n\n\n
&lsquo;<\/pre>\n\n\n\n
This would yield the correct open-quote character needed for this purpose.<\/p>\n\n\n\n
For double-quotes, the HTML codes are:<\/p>\n\n\n\n
&ldquo;<\/pre>\n\n\n\n
\u2026for the opening, right-facing double-quotes, and:<\/p>\n\n\n\n
&rdquo;<\/pre>\n\n\n\n
\u2026for the closing, left-facing double-quotes.<\/p>\n\n\n\n
Interestingly, there are no correct prime marks in HTML, so making single or double-primes for actual inch dimensions is not included in the HTML character set. I suppose you could go back to the unattractive typewriter quotes:<\/p>\n\n\n\n
&quot;<\/pre>\n\n\n\n
\u2026which works OK for inch marks (it\u2019s not great, but it\u2019s better than nothing).<\/p>\n\n\n\n
And, what about en- and em-dashes? Can HTML handle those? Absolutely! To get an en-dash, the HTML code is:<\/p>\n\n\n\n
&ndash;<\/pre>\n\n\n\n
And for the em-dash, it\u2019s:<\/p>\n\n\n\n
&mdash;<\/pre>\n\n\n\n
If you find yourself working on an online publication, you could set up some of the more common codes in keyboard shortcuts. I have used a program called QuickKeys<\/em> on my Mac for years; similar programs exist for both Mac and Windows machines. By hitting some combination of keys you can get strings of characters for your work in HTML, or elsewhere.<\/p>\n\n\n\n
I have prepared a chart showing all of the HTML characters and their respective codes. Please download it with the link below and send it to your favorite online newspaper, or to the Rachel Maddow Show<\/em> (where the typography has improved, but they still don\u2019t know about proper quotation marks).<\/p>\n\n\n\n
\"\"
Please click here<\/a> to download this file.<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
In a previous post I wrote about the differences between typewriter quotes and real quotation marks, and how to do it right. I have received some nice feedback on that post. One person suggested that while it\u2019s great to use … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,14],"tags":[64,842,841,733],"class_list":["post-2957","post","type-post","status-publish","format-standard","hentry","category-typography-2","category-web","tag-brian-lawler","tag-proper-punctuation-in-html","tag-proper-quotes-in-html","tag-typographic-discipline"],"_links":{"self":[{"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=\/wp\/v2\/posts\/2957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2957"}],"version-history":[{"count":5,"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=\/wp\/v2\/posts\/2957\/revisions"}],"predecessor-version":[{"id":2964,"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=\/wp\/v2\/posts\/2957\/revisions\/2964"}],"wp:attachment":[{"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thelawlers.com\/Blognosticator\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}