Posts tagged

What Is Involved in Bringing Digital Texts into the World’s Languages? /

Web and ebook technology is a boon to the advancement of the written word. But it’s complex work to bring digital texts into the world’s languages. This article by Jiminy Panoz is a helpful overview: “Internationalization is fascinating: the ebook case.” It’s concise for the complexity involved. There’s even some coverage of the languages we work with in India.

At the start of my work abroad in digital technology, I felt the floor of my knowledge bottom out. So many assumptions unraveled. The flow and layout of an entire document changes for right-to-left scripts, for languages without letters, for languages with letters and half-letters that morph and seem out of order. And then to account for variations of operating systems and software that render these complex scripts differently. The work requires new vocabulary and standards to begin to address the challenges.

A digital reading system like the one in the referenced article may have it’s challenges but it already builds on advanced work in linguistics, design and technology. Here’s what it took to arrive at the current problems of international web and ebook development: language requirements research, the pioneering work of SIL, Unicode, mobile platforms, web standards, and fonts for every complex writing system. These are all monumental tasks in their own right. All for the sake of universal access to the written word.

I develop websites and digital texts in complex scripts with people in South Asia. I’m surprised every time I watch one open it on their mobile phone and read it with joy. I’m grateful for the humble technology worker that makes a way for this good reading experience.

Read Jiminy Panoz, “Internationalization is fascinating: the ebook case” (Dec 28, 2017).

“Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility” /

Summary of the article by Andy Bell, “Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility,” January 11, 2018.

  1. Document Structure and Semantics:
    1. Use a Single <main> Element: Help screen readers and add a skip link (and a :focus style) to it.
    2. Use Elements Appropriately: Use <button> for interactive elements and get keyboard events for free.
    3. Get Your Heading Hierarchy Locked-Down: Help screen readers navigate pages with a nice structure of <h1>, <h2>, etc.
  2. Get Your Color Contrast Right: Use tools to get a compliant contrast ratio of at least 4.5:1 for text and 3:1 for headings.
  3. Responsible Text Labels: Use attribute aria-label to give context to labels and links.
  4. Small Typography Tweaks With a Big Impact:
    1. Size body content at 16px minimum, and line-height at around 1.5.
    2. Highlight key words and phrases.
    3. Use ligatures and decorative elements only in headings; sans-serif fonts are better for readers with dyslexia.
  5. Enhance Keyboard Support:
    1. Allow the escape key to hide dialogues.
    2. Use the :focus pseudo-selector to add obvious state changes.
  6. Don’t Rely on Color Alone to Communicate State Changes

Keep learning about accessbility. See the article for recommended resources.

Non-technical Accessibility Tips for UI Design /

Notes from “Advocating for Accessible UI Design” by Lara Schenck on CSS-Tricks.

Accessibility is not just the responsibility of web developers. Accessibility begins with design decisions. Share non-technical tips for UI design to everyone on the team so they make more accessible design choices in future:

  1. Easy on the animations.
  2. Make sure background and text colors have enough contrast.
  3. Be very careful when overlaying text on images, or don’t.
  4. Double-check the readability of font weights and sizes.
  5. Indicate external links.
  6. Differentiate between action-oriented social media links vs. profile links.
  7. Don’t rely 100% on icons and colors to communicate.
  8. Consider what the design would look like without interactivity.

Read the details at “Advocating for Accessible UI Design.”

Dave Peth, “Feedback That Gives Focus,” A List Apart (Nov 14, 2017)

Marcin Wichary, “Typography is impossible,” Medium Engineering (Aug 24, 2016)

HTML Reversed Ordered List /

I’ve learned that you can reverse the sequence of numbers in an HTML ordered list (<ol>) with the HTML5 attribute, reversed. As in:

<ol reversed>
    <li>French hens</li>
    <li>Partridge in a pear tree</li>

Which gives:

  1. French hens
  2. Turtledoves
  3. Partridge in a pear tree

There is also the attribute start to specify the start value, useful to resume the numbering of a list after it is interrupted by another block element.

Chris Coyier, “Design Resource Sites,” CSS-Tricks (Sep 13, 2017)

Ben Schwarz, “The Critical Request,” CSS-Tricks (Aug 1, 2017)

Simulate depth in interface design by atmosphere (a shift of hue and value) instead of drop shadow. Innovative and natural. —C.M.H.

“Out of the (Drop)Shadows,” Scott Jensen Design (May 29, 2017)

PDFs as Images /

PDFs are vector documents but are also valid images sources in modern browsers.

I had been looking for a solution to display PDFs in an HTML page, rather than just provide a link to view or download it separately. Browsers used plugins in the past, and there are some good JavaScript solutions to display multi-page PDFs like Mozilla’s pdf.js. But my need at the time was simple. I wanted a visual of the PDF but I didn’t want to convert the PDF to a destructive image format. I was pleased to learn that I could make a PDF file the src of an <img> tag in HTML.

Limitations: Only the first page of a PDF will be displayed inline. This restriction is according to the specs. And you cannot point to a specific page of a multi-page PDF document like you can with an anchor link (ex. <a href="....pdf#page=2>).

So this technique is good for one-page PDFs or to display the first page of a multi-page PDF as a preview image, linked to the full document. If you use a Markdown editor like Ulysses, know that you can similarly use a PDF as an image.