Tag: unicode

Accessibility of Unicode as styled text

Facebook, Twitter, Instagram, and other internet sites often lack the ability to style text, like making it bold or italics. Some “clever” people have discovered ways of abusing Unicode to make the appearance of styled text with these sites. Unfortunately doing so renders the text completely inaccessible by users of assistive technology.

You might have run across an Instagram profile, Facebook post, or tweet that includes styled text and wondered how the person did that. They probably used a site like YayText [which I’m loath to reference at the risk of encouraging its use]. These sites take a string of text as input and present the user with what visually is the same text but styled in a variety of ways. How does this work? To explain that, we need a brief primer on Unicode.

Unicode is a technology standard that allows computers to encode and represent hundreds of thousands of characters, letters, and symbols used in over 100 world languages. It allows computers to differentiate between the English letter K (U+004B) and the Greek letter Κ (kappa, U+039A) because while they are visually similar — at least in many fonts — they are two very different letters and mean two very different things.

But Unicode supports more than just languages, it also supports mathematical symbols including a whole slew of alphanumeric ones. These mathematical symbols are intended to be used for math texts and are semantically different than their Latin counterparts. Said another way: just because the 𝐴 looks like an italic A doesn’t mean it is one.

Why is this important? Is this just a language nerd getting uppity about incorrect use of Unicode? It matters because beyond being semantically incorrect, using Unicode in this way renders the text completely unintelligible to assistive technology like screen readers.

When a screen reader encounters 𝐴 (U+1D434), it will read it as “mathematical italic capital a” because that’s what it is. It isn’t the English letter A (U+0041) that is italic. Which means that the string “apples 𝐴𝑁𝐷 bananas” will be read to the user as:

apples mathematical italic capital a mathematical italic capital n mathematical italic capital d bananas

The video in this tweet by @kentcdodds does an excellent job of demonstrating just how horrible this is for people with screen readers.

While I can certainly sympathize with the desire to add style and emphasis to help convey emotion in written form, let’s not do so at the exclusion of others.

Thank you to this StackExchange question & answer for confirming my suspicions and providing the video link when I was investigating this back in July.

Migrating Distributed Proofreaders to Unicode

When Distributed Proofreaders started in 2000, Project Gutenberg only accepted eBooks in ASCII, later flexing to ISO-8859-1. pgdp.net has always only supported ISO-8859-1 (although practically this was really Windows-1252) which we refer to simply as Latin-1. This character set was enforced not only for the eBooks themselves, but also for the user interface. While the DP codebase has long supported arbitrary character sets, in many places it was assumed these were always using 1-byte-per-character encodings.

But the world is much bigger than Latin-1 and there are millions of books in languages that can’t be represented with 1-byte-per-character encodings. Enter Unicode and UTF-8, which Project Gutenberg started accepting a while back.

There has been talk of moving pgdp.net to Unicode and UTF-8 for many years but the effort involved is daunting. At a glance:

  • Updating the DP code to support UTF-8. The code is in PHP which doesn’t support UTF-8 natively. Most PHP functions treat strings as an array of bytes regardless of the encoding.
  • Converting our hundreds of in-progress books from ISO-8859-1 to UTF-8.
  • Finding monospace proofreading fonts that support the wide range of Unicode glyphs we might need.
  • Updating documentation and guidelines.
  • Educating hundreds of volunteers on the changes.

In addition, moving to Unicode introduces the possibility that proofreaders will insert incorrect Unicode characters into the text. Imagine the case where a proofreader inserts a κ (kappa) instead of a k. Because visually they are very similar this error may end up in the final eBook. Unicode contains literally millions of characters that wouldn’t belong in our books.

There has been much hemming and hawing and discussions for probably at least a decade, but little to no progress on the development side.

Unicode, here we come

Back in February 2018 I started working on breaking down the problem, doing research on our unknowns, making lists of lists, and throwing some code against the wall and seeing what stuck.

This past November, almost 2 years later, we got to what I believe is functionally code-complete. Next June, we intend to roll out the update to convert the site over to Unicode. Between now and then we are working to finish testing the new code, address any shortcomings, and update documentation. The goal is to have the site successfully moved over to Unicode well before our 20th anniversary in October 2020.

Discoveries and Decisions

Some interesting things we’ve learned and/or decided as part of this effort.

Unicode

Rather than open up the floodgates and allow proofreaders to input any Unicode character into the proofreading interface, we’re allowing project managers to restrict what Unicode characters they want their project to use. Both the UI and the server-side normalization enforce that only those characters are used. This allows the code to support the full set of Unicode characters but reduces the possibility of invalid characters in a given project.

For our initial roll-out, we will only be allowing projects to use the Latin-1-based glyphs in Unicode. So while everything will be in Unicode, proofreaders will only be able to insert glyphs they are familiar with. This will give us some time to ensure the code is working correctly and that our our documentation is updated before allowing other glyphsets to be used.

When you start allowing people to input Unicode characters, you have to provide them an easy way to select characters not on their keyboard. Our proofreaders come to us on all kinds of different devices and keyboards. We put a lot of effort into easing how proofreaders find and use common accented characters in addition to the full array of supported characters for a given project. One of our developers created a new, extensible, character picker for our editing interface in addition to coding up javascript that converts our custom diacritical markup into the desired character.

Unicode has some real oddities that we continue to stumble across. It took me weeks to wrap my head around how the Greek polytonic oxia forms get normalized down to the monotonic tonos forms and what that meant for our books which all predate the 1980s change from polytonic to monotonic. I also can’t believe I summed up weeks of discussions and research in that one sentences.

Fonts

DP has our own proofreading font: DPCustomMono2. It is designed to help proofreaders distinguish between similar characters such as: l I 1. Not surprisingly, it only supports Latin-1 glyphs. We are still evaluating how to broaden it to support a wider set. That said, fonts render glyphs, not character sets, so the font will continue to work for projects that only use the Latin-1 character set.

We were able to find two other monospace fonts with very broad Unicode support: Noto Sans Mono and DejaVu Sans Mono. Moreover, both of these can be provided as a web font (see this blog post for the former, and FontSquirrel for the latter), ensuring that all of our proofreaders have access to a monospace Unicode-capable font. Note that a prior version of Noto Sans Mono, called Noto Mono, is deprecated and you should use the former instead.

Most browsers do sane glyph substitution. Say you have the following font-family style: ‘font-family: DPCustomMono2, Noto Sans Mono;’ and both fonts are available to your browser as web fonts. If you use that styling against text and there is a glyph to render that doesn’t exist in DPCustomMono2, the browser will render that one glyph in Noto Sans Mono and keep going rather than render a tofu. This is great news as it means we can provide one of our two sane wide-coverage Unicode monospace fonts as a fallback font-family ensuring that we will always have some monospace rendering of all characters on a page.

MySQL

Modern versions of MySQL support two different UTF-8 encodings: utf8mb3 (aka utf8) & utf8mb4. The former only supports 3-byte UTF-8 characters whereas utf8mb4, introduced in MySQL v5.5.3, supports 4-byte UTF-8 characters. We opted for utf8mb4 to get the broadest language support and help future-proof the code (utf8mb3 is now deprecated).

An early fear was that we would need to increase the size of our varchar columns to handle the larger string widths needed with UTF-8. While this was true in MySQL 4.x, in 5.x MySQL varchar sizes represents the size of the string regardless of encoding.

PHP

PHP continues to be a pain regarding UTF-8, but it wasn’t as bad as we feared. It turns out that although most of the PHP string functions operate only on byte arrays, assuming 1-byte characters most of the places where we use them that’s just fine.

For other places, we found portable-utf8 to be a great starting point. Some of the functions aren’t particularly performant and it’s incredibly annoying that so many of them call utf8_clean() every time they are used, but it was super helpful in moving in the right direction.

mb_detect_encoding() is total crap, as I mentioned in one recent blog post, but we hacked around that.

Detecting Windows-1252 encoding

For Distributed Proofreader‘s move to Unicode we need to handle accepting files from content providers that are not in UTF-8. Usually these files come in as Windows-1252, but sometimes they might be ISO-8859-1, UTF-16, or even in UTF-32. We need to get the detection correct to ensure a valid conversion to UTF-8.

For reasons beyond my ken, PHP’s mb_detect_encoding() function appears to be completely unable to detect the difference between Windows-1252 and ISO-8859-1 for strings that clearly have characters in the 0x80 to 0x9F ranges. Shockingly, it also wasn’t able to detect files encoded as UTF-16 with BOMs which I absolutely don’t understand. And it appears I’m not the only person having problems with it.

So we rolled our own, which I feel is almost as blasphemous as writing our own date handling library, but here we are. In case others out there are looking for something similar, here you go. Keep in mind that our objective is to determine an encoding from an expected, known set and ultimately convert the string to UTF-8.

This detection doesn’t have to be perfect. If the file isn’t in UTF-8 we warn the project manager about the detected encoding before they load the files, so if we guess the encoding wrong there’s a human to double-check it before proceeding.

# Attempt to detect a string's encoding from the following subset
# of expected encodings:
#   * UTF-8 (includes pure-ASCII which is a valid subset)
#   * UTF-16BE, UTF-16LE, UTF-32BE, UTF-32LE based on the BOM
#   * Windows-1252
#   * ISO-8859-1
# These strings match what mb_detect_encoding() would return.
# The function returns false if it's unable to guess.
# It will readily return ISO-8859-1 in many circumstances.
function guess_string_encoding($text)
{
    # See if preg_match() sees it as valid UTF-8 already
    if (preg_match('//u', $text)) {
        return 'UTF-8';
    }

    # evaluate the BOM, if one exists, borrowed from
    # https://stackoverflow.com/questions/49546403/php-checking-if-string-is-utf-8-or-utf-16le
    $first2 = substr($text, 0, 2);
    $first4 = substr($text, 0, 4);
    if ($first4 == "\x00\x00\xFE\xFF") return 'UTF-32BE';
    elseif ($first4 == "\xFF\xFE\x00\x00") return 'UTF-32LE';
    elseif ($first2 == "\xFE\xFF") return 'UTF-16BE';
    elseif ($first2 == "\xFF\xFE") return 'UTF-16LE';

    # If the string contains characters in ranges that are either
    # control characters or invalid for ISO-8859-1 or CP-1252
    # return false indicating we are unable to reliably guess
    if (preg_match('/[\x00-\x08\x0E-\x1F\x81\x8D\x8F\x90\x9D]/', $text, $matches)) {
        return false;
    }

    # If we get here, we're going to assume it's either Windows-1252
    # or ISO-8859-1. If the string contains characters in the
    # ISO-8859-1 reserved range, that's probably Windows-1252.
    if (preg_match('/[\x80-\x9F]/', $text)) {
        return 'Windows-1252';
    }

    # Give up and return ISO-8859-1
    return 'ISO-8859-1';
}

Like all dproofreaders code, the above is in the GPL v2.0.

Noto Sans Mono webfont

Over at Distributed Proofreaders we’re busy working to convert the site code over to Unicode from Latin-1. Part of that work is finding a monospace proofreading font that covers set of Unicode codepoints we need and is, or can be made available as, a webfont.

The Google Noto font family is an obvious candidate as it contains two monospace fonts: Noto Mono and Noto Sans Mono. Frustratingly, while Noto Sans is available directly from the Google Font CDN, neither of the two Mono fonts are included.

Noto Mono is available for download as a webfont from FontSquirrel. Note that by default FontSquirrel will provide you with the Western Latin subset of the font, so if you want the full thing disable subsetting. Note that Noto Mono is deprecated in preference to Noto Sans Mono.

Noto Sans Mono is not available from FontSquirrel, although their Noto Sans page says they can’t provide the font due to licensing restrictions. Noto Sans is licensed under the SIL Open Font License, which FontSquirrel reads as preventing them from providing a webfont version of it. Noto Sans Mono is under the same license.

If your read of the SIL Open Font License is different, or if you are willing to change the name of the font and use it, you can use their Webfont Generator to upload the desired TTF variants you’ve downloaded from the Google Noto Sans Mono page.

It’s worth talking about font variants for a moment. Noto Sans Mono comes with 36 variants, such as Regular, Bold, ExtraBold, Light, ExtraLight, Condensed — you get the idea. Each one of these contains glyphs to render a wide range of Unicode codepoints in the desired form. You are probably most interested in the Regular and Bold forms.

Let’s assume you upload the Regular and Bold TTF files to FontSquirrel’s Webfont Generator. You will probably want to enable Expert mode and de-select many of the things that FontSquirrel will do to the font, like truetype hinting, fixing missing glyphs, fixing vertical metrics, etc. Google has done a great job on these fonts and you shouldn’t need any of that. If you want to retain the font’s full set of glyphs you will want to disable subsetting too.

The download will include two WOFF, two WOFF2 files, and a stylesheet to use them. FontSquirrel doesn’t understand that we’ve uploaded two variants of the same font, so we need to fix the stylesheet so that the bold and regular versions work like we want them to. We need to use style linking to tell the web browser that they are the same font, just different styles. Note how the CSS block below uses the same font names for both the Regular and the Bold, but the bold version has a ‘font-weight: bold’ tag:


@font-face {
    font-family: 'Not Noto Sans Mono';
        src: url('notnotosansmono-regular.woff2') format('woff2'),
             url('notnotosansmono-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Not Noto Sans Mono';
        src: url('notnotosansmono-bold.woff2') format('woff2'),
             url('notnotosansmono-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

This allows us to use the ‘Not Noto Sans Mono’ font in regular and bold versions just like we would expect:

<p style='font-family: Not Noto Sans Mono;'>Regular mono</p>
<p style='font-family: Not Noto Sans Mono; font-weight: bold;'>Bold mono</p>

It would be far simpler if Google just provided Noto Sans Mono on their font CDN. I’ve sent them an email to that effect, but who knows how that will go.

If you’re wary of converting Noto Sans Mono yourself, a reasonable alternative is DejaVu Sans Mono which also has a very wide set of the Unicode codepoints — it’s available for download as a webfont from FontSquirrel.