tl;dr Google Fonts doesn’t supply fonts with OpenType features (such as old-style figures, or small-caps), but you can build and host the fonts yourself to support everything you need.

I recently posted a article which contained lots of numbers. While I was proofreading the article, I didn’t quite liked how the numbers looked, sometime the digits were below the baseline, for example:

Where I would have expected the top and bottom of each digit to be aligned:

This made me flashback to all the typography I learnt when working with LaTeX. These two styles of figures are called old-style, and lining (or sometimes lowercase and uppercase numbers). The theory is that old-style numbers flow better when mixed with text. Recall, letters like q, j and p, all drop below the baseline, which makes the text nicer to read:

However, my article had many numbers on the page, sometimes within tables, where old-style just made the numbers look odd. I looked for a way to force the lining style throughout. I quickly found the CSS styling:

body {
           font-variant-numeric: lining-nums; 
  -webkit-font-feature-settings: "lnum" on;
     -moz-font-feature-settings: "lnum" on;
      -ms-font-feature-settings: "lnum" on;
          font-feature-settings: "lnum" on;
}

Sadly when I applied this to my site, it did nothing. I wondered if perhaps the font did not support lining figures. A quick search led me to Stack Overflow that implied both the font I was using, Raleway, and Google Fonts (which hosted the font) did in fact support lining.

So I went deeper down the rabbit hole to figure out what was going wrong. I wanted to confirm for myself that the font supported lining figures. I searched for a while for a simple CLI that would inspect the WOFF/TTF files and tell me what they contained. Sadly, the best I could find was FontForge, a GUI. That worked, and confirmed the fonts being served by Google did not contain the lining feature, or in fact any feature other than basic ligatures.

Later I found this GitHub issue which confirmed all features were stripped from the font. So I sought out a way to rebuild the Google font to keep the lining figures.

Before that, I started to shave another yak, and decided to create a CLI tool that would easily display the font features. I came across a Go library, SFNT that can parse OpenType fonts. Sadly it didn’t implement the parsing of the features. A few hours later, I read the OpenType spec and sent them a pull request to add this functionality. Now I can easily confirm from the command line what features are supported.

$ font features raleway-v12-latin-ext_latin-regular.woff
Glyph Substitution Table (GSUB):
	Script "latn" (Latin):
		Default Language:
			Feature "liga" (Standard Ligatures)

I decided to play around with Google Font API, and then eventually the unoffical (but awesome) google-webfonts-helper (a hassle-free way to self-host Google Fonts). However, no combination of options would make the font contain the lining figures.

Since the Google Fonts are open source, I downloaded the source TTF of the font, and double-checked it did indeed contain the feature:

$ font features Raleway-Regular.ttf 
Glyph Substitution Table (GSUB):
  Script "latn" (Latin):
    Default Language:
      Feature "aalt" (Access All Alternates)
      Feature "dlig" (Discretionary Ligatures)
      Feature "liga" (Standard Ligatures)
      Feature "lnum" (Lining Figures)
      Feature "onum" (Oldstyle Figures)
      Feature "salt" (Stylistic Alternates)
      Feature "smcp" (Small Capitals)
      Feature "ss01" (Stylistic Set 1)
      Feature "ss02" (Stylistic Set 2)

So my next idea was to take the original Raleway-Regular.ttf and convert it to WOFF and WOFF2, and strip out the bits I don’t need. Just how Google Fonts does, to ensure the resulting files are lean and performant.

I couldn’t find the pipeline Google Fonts uses to process the files, so I instead took it upon myself to figure this out. I started by using pyftsubset (part of FontTools) to remove unneeded character sets, features, and other parts from the original TTF file.

$ pip install fonttools
$ pyftsubset Raleway-Regular.ttf --layout-features='*' --unicodes="U+0000-00FF, U+0100-024F, U+0131, U+0152-0153, U+02DA, U+02DC, U+02BB-02BC, U+02C6, U+0259, U+0370-03FF, U+1E00-1EFF, U+2000-206F, U+2070-209F, U+2074, U+20A0-20CF, U+2122, U+2150-218F, U+2200-22FF, U+2C60-2C7F, U+A720-A7FF" --output-file=Raleway-Regular.subset.ttf

Now I had a TTF file with all the features, but only the subset of characters I use on my site. Next I needed to convert this this file to all the recommended font formats, so my site would look nice in IE, Chrome, Android and iOS. The resulting CSS would look like this:

@font-face {
  font-family: 'Raleway';
  src: url('raleway-regular.subset.eot');                           /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('raleway-regular.subset.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('raleway-regular.subset.woff2') format('woff2'),    /* Super Modern Browsers */
       url('raleway-regular.subset.woff') format('woff'),     /* Pretty Modern Browsers */
       url('raleway-regular.subset.ttf') format('truetype'),    /* Safari, Android, iOS */
       url('raleway-regular.subset.svg#ralewayregular') format('svg');    /* Legacy iOS */
  font-style: normal;
  font-weight: 400;
}

I again tried to use pyftsubset to save the files in the required formats. This worked well for TTF, WOFF, and WOFF2. But didn’t support EOT or SVG fonts:

$ pip install zopfli
$ pip install brotli
$ pyftsubset ... --flavor=woff --with-zopfli --output-file=Raleway-Regular.subset.woff
$ pyftsubset ... --flavor=woff2 --output-file=Raleway-Regular.subset.woff2

So instead I searched for a all-in-one solution to converting fonts. I found numerous websites that offered to do it, the one I settled on was fontsquirrel.com. Here I used the expert feature, to control exactly what was in the font, and to produce compressed versions in all file formats. I originally tried to use the subsetting feature on fontsquirrel, but I couldn’t get it to maintain all the features I needed, so I used pyftsubset locally instead.

After fontsquirrel.com produced the fonts, I checked it contained the features, and compared the resulting file sizes:

$ ls -ltr

# Google Fonts
 96K  raleway-v12-latin-ext_latin-regular.ttf
 40K  raleway-v12-latin-ext_latin-regular.woff
 31K  raleway-v12-latin-ext_latin-regular.woff2

# My versions
140K raleway-regular.subset-webfont.ttf
 61K raleway-regular.subset-webfont.woff
 46K raleway-regular.subset-webfont.woff2

$ font features raleway-regular.subset-webfont.woff
Glyph Substitution Table (GSUB):
  Script "latn" (Latin):
    Default Language:
      Feature "aalt" (Access All Alternates)
      Feature "dlig" (Discretionary Ligatures)
      Feature "liga" (Standard Ligatures)
      Feature "lnum" (Lining Figures)
      Feature "onum" (Oldstyle Figures)
      Feature "salt" (Stylistic Alternates)
      Feature "smcp" (Small Capitals)
      Feature "ss01" (Stylistic Set 1)
      Feature "ss02" (Stylistic Set 2)

The file size didn’t vary too much, and thus it was a simple matter of uploading the fonts to my blog, and updating the CSS.

1234567890  vs  1234567890

This summer, as part of GoogleServe, I volunteered in a local school to teach kids about the importance of mathematics. This was part part of a larger program organised by the Silicon Valley Education Foundation (SVEF).

I had 90 minutes, to introduce myself, talk a little about Google, and then spend the majority of the time teaching a topic of my choosing. Not knowing anything about teaching 8th graders I went to the Internet to find some material.

I quickly found cse4k12.org, and the excellent YouTube series by csunplugged.org. I decided I would teach about counting in binary. The csunplugged videos showed how to introduced this material in a way that seemed fun and got got the kids to work out the concepts on their own. I decided to mix the teaching with worksheets from cse4k12.org (to reinforce what the kids just learnt). Since I only had ~90 minutes to cover a lot, I took what I found on cse4k12.org and simplified their activities. I went ahead and created new worksheets, and am providing them here today for others to use. The rough schedule I used was:

• 10min Intro to counting in binary, with kids holding up bits (similar to this video).

• 15min Work on this “Counting In Binary” worksheet.

• 10min Representing text (again similar to this video)

• 15min Using “Encoding Table” and “Encoding Message” worksheets to write some secret messages to each other.

• 10min Representing images with binary.

• 15min Using the “Bitmaps” worksheets to encode their own images, and if time allows swapping encoded images with each other to decode.

All in all, this worked quite well. I learnt a lot, and was happy to see the class engaged! I will certainly be taking part in activities like this again.

P.S I found printing all sheets double sided worked really well. Oh and no computers needed! Put those laptops away.

As part of my standard Maven configuration, I like to use two plugins backed by Google technologies, the first to help keep my code formatted correctly, and the second to check for compile time errors. However, Google recently moved to require JDK 1.8, which broke anyone trying to compile my projects with an older JDK. In this article I’ll quickly explain how to configure Maven to work around this problem.

Specifically I use the following two plugins:

• coveo/fmt-maven-plugin (which uses google-java-format). This follows the Google’s Java Style guide, and reformats the code to ensure it stays consistent. This is great when accepting external contributions, as it keeps the code base uniform, and avoids style discussion on pull requests.

• plexus-compiler-javac-errorprone (which uses Google’s errorprone). This is a static code analysis tool, that checks for simple errors at compile time, and fails the build if they are found. Again, this helps improve the quality of the code.

Even though my projects typically target 1.7, these plugins require to run under 1.8. Really I’d prefer I could bump all my projects to target 1.8+, but since a few of my projects are libraries (which other people include into their projects), that is easier said than done. To deal with this, I changed my Maven configuration to only run these two plugins when run under the sufficient JDK. This means those using a older JDK don’t get the benefits, but since locally I use JDK 8, and all my open source projects use Travis CI, eventually these issues will be identified.

So if you get an error like

java.lang.UnsupportedClassVersionError: com/google/googlejavaformat/java/FormatterException : Unsupported major.minor version 52.0

or

An API incompatibility was encountered while executing org.apache.maven.plugins:maven-compiler-plugin:3.5.1:compile: java.lang.UnsupportedClassVersionError: javax/tools/DiagnosticListener : Unsupported major.minor version 52.0

Please update to JDK 1.8, or update your Maven configuration to restrict these plugins to when run on a modern JDK:

<project>
...
    <profiles>
        <profile>
            <id>java18</id>
            <activation>
                <jdk>1.8</jdk>
            </activation>
            <build>
                <plugins>
                    <plugin>
                        <groupId>com.coveo</groupId>
                        <artifactId>fmt-maven-plugin</artifactId>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>format</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-compiler-plugin</artifactId>
                        <configuration>
                            <compilerId>javac-with-errorprone</compilerId>
                            <forceJavacCompilerUse>true</forceJavacCompilerUse>
                            <showWarnings>true</showWarnings>
                            <compilerArgs>
                                <arg>-Xlint:all</arg>
                            </compilerArgs>
                        </configuration>
                        <dependencies>
                            <dependency>
                                <groupId>org.codehaus.plexus</groupId>
                                <artifactId>plexus-compiler-javac-errorprone</artifactId>
                                <version>2.8.1</version>
                            </dependency>
                            <!-- override plexus-compiler-javac-errorprone's dependency on
                                 Error Prone with the latest version -->
                            <dependency>
                                <groupId>com.google.errorprone</groupId>
                                <artifactId>error_prone_core</artifactId>
                                <version>2.0.19</version>
                            </dependency>
                        </dependencies>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
...
</project>

This defines a new profile, that is only “activated” under Java 1.8. When activated the <build> section has the two additional plugins added. Ensure that these plugins are no longer mentioned in the regular <build> section, and only in the <profile><build> section.

An example of this change can be found in recent commit.

Google Chrome today pestered me with a message which I thought was quite funny. It reads:

Old school’s not cool. Google Chrome is woefully out of date because it hasn’t crashed or restarted in at least two weeks. Restart to apply update.

Today Google announced a public DNS service they are hosting. They claim that their DNS infrastructure is faster and more secure, because their servers do some clever things. I wanted to test their performance claims, so I wrote a little script to measure a lookup times for different domains across a number of DNS servers.

Methodology

Firstly I found a list of the 1 million most popular sites. I then picked a number of DNS servers to test against. I chose Google‘s, OpenDNS‘s, my ISP (Sky/Easynet) and my old ISP’s (Plus.net).

I decided I would query an A record for each of the domains in the list, one at a time, starting with the most popular. I would query each server three times for the same domain name. The ordering was like this:

foreach (domain)
   for (i =0; i<3;i++)
      foreach (server)
         query(server, domain)

I recorded the time it took for each query to be answered, and I also recorded the replies. I was curious to see if some servers replied with different answers, or if some returned more information, i.e. additional records.

I wrote a script in PHP 5.3, and ran it from the command line on my Windows Server 2008 machine. The script used PEAR’s Net_DNS to craft and send the DNS questions. I was not using my operating system’s resolver, and I was not using any form of client side caching. I ran the experiments from my home ADSL connection and as far as I know my ISP was not interfering with my DNS requests in any way. I live in the North West of the UK.

Results

After letting this run for a few hours, and querying roughly the top 10,000 domains, I have some preliminary results.

From this table of results, we can see that Google’s median response time is 41-42ms, however, OpenDNS performs much better with a result of ~31ms. Both my current ISP and my old ISP don’t perform as well and each achieved a result between 42ms and 61ms. To get a better feel for the data I plotted an empirical CDF of the lookup times for each server.

The first impression I can make from this CDF is that OpenDNS serves far more of the queries faster than anyone else. Secondly the secondary DNS servers all seem to be faster than their primaries. I suspect this is because most hosts query the primary, and rarely query the secondary. I even read that BIND (a popular DNS server) has/had a bug in it which favoured the primary DNS.

The minimum lookup time for each pair of DNS servers seems to be the same, most likely caused by the network latency between me and the servers. Even so, if we normalise all the data by taking the servers’ minimum value away from each sample, we still find that OpenDNS performs better than Google, and Google performs slightly better than Plus.net and quite a bit better than my current ISP, Easynet.

Rather worryingly is that the latency to OpenDNS is smaller than the latency to my own ISP’s DNS servers. This makes me wonder where the hell my ISP hosts their DNS servers. Also, the ~38ms minimum time with Google indicates that at least some of their DNS servers are hosted in Europe, and possibly the UK.

SInce I ran each lookup three times, I wanted to compare the lookup times for each request. This time I plotted the empirical CDF of each iteration of request.

This CDF seems to show that the 2nd and 3rd requests always get served quicker than the first. In most cases the 2nd and 3rd request have equal ranking, but the first is always slow. This could easily be attributed to the fact that the caching DNS server does not have the record in its cache, and thus must be fetched. The second time I request the domain name (only moments later), the server already has the query, and most likely has it stored in RAM or L1/L2 CPU cache.

OpenDNS_B seems to respond equally quick for the first, second and third request. This could be because I would always query OpenDNS_A first, then move on to B. If A and B were actually the same machine, it would be like sending 6 requests to the machine instead of 3. Therefore, B’s 1st request is actually its second. Even if A and B were different machines, there could be some clever replication, or shared caching going on to cause this behaviour.

Finally, I’m surprised that the 2nd and 3rd requests are slower, especially since I’m requesting the most popular domain names. Surely others would have already requested the domain name, and thus the DNS server has no need to fetch it. Looking through the list of domain names I see that none of them have the www prefix. I personally never type the www and just hope the site works, but perhaps many users do. Maybe I should re-run the experiment with the www prefix.

Conclusion

For now I would stick to using OpenDNS, as this is clearly the winner. However, the Google DNS service is very new, so perhaps the servers haven’t had enough time to fill their caches, and their admins haven’t had enough time to tweak them. I will perhaps rerun this experiment in a few weeks and see what happens.

TODO

I still have some analysis to do, for example, looking at packet loss, the type of records returned, and anything else I can think of.

What happens when you mix; Haggis, Vodka, a room full of nerds, and a average of 1.4 laptops per person?

Whilst using Google Calendar I noticed an interesting feature, which I’m unsure if it should be there are not. I’ve contacted google twice about this bug but never received a reply. So I figured I would post about it here.

When creating a Google Calendar you may share the calendar with your friends and allow them to alter it. You do this by clicking “Share this calendar” and then typing in their email address. I noticed something odd when I typed in a friend’s Gmail address and clicked “Add Person”. His name appeared next to the newly entered email address. I thought this might be because I previously spoke to this person via email, or he was a friend on GTalk.

I asked around and collected a selection of address which I had never contacted or even seen before. I entered each one, and sure enough their owner’s names appeared! Then I tried to enter invalid Gmail addresses, and sure enough those were accepted, but did not display any name.

I think this is a very simple way to obtain information from a email address, and to even test if the email exists or not. Hopefully this isn’t a feature and in fact Google made a mistake.