Sunday, October 21, 2012

My first encounter with custom web fonts

Spurred by the story of the OpenDyslexic font, the one that is now included in this blog as an option for dyslexic people, I started exploring this concept of custom fonts for a web page. First of all, I wanted that the dyslexia option would work in all browsers, so I checked it in Chrome (my default), FireFox and Internet Explorer 8.

I was not surprised to see that Internet Explorer was not showing the fonts as Chrome did, but I was a little that FireFox did not render the font. I had FF 3.0.11 installed at that moment. I've updated FireFox, checked it, seemed to be working. Then, on a whim, I started to look into web fonts for Internet Explorer. And the option exists! Even better, you can use web fonts since Internet Explorer 6! The catch is, though, that Microsoft are using a proprietary font format which only recently was submited to the W3C as an open standard.

Now about the dyslexic fonts people. I went to their site using Internet Explorer and I got that annoyingly condescending message "You are using an outdated browser.". In other words if you are dyslexic they will make and host a free font for you, but if you use Internet Explorer, screw you! I found this behaviour at least weird and more towards offensive.

So I downloaded their font, converted it from OTF to EOT format using the online free font converter Font2Web, then went to find some sort of font hosting site that would allow me to upload and host my custom font. And I found one called TypeFront. They are only offering for free only a single font that can be accessed 500 times daily, but still better than the other services that ask for money for every single option. So close to making the dyslexia option cross browser! And FAIL. TypeFront only allows the upload of fonts with the formats OTF, TTF and WOFF. They are not even mentioning EOT. I wrote them an email, but I don't expect much. Meanwhile, if you know of a decent free font hosting site, please let me know. Update: I was wrong. The TypeFront service allows for uploading only a few formats, but then it converts and publishes all formats, including EOT and even SVG. I am happy to report that the dyslexic font works now on all browsers!

Update April 2016: It appears that the TypeFront site is completely down, the domain gone.

It occurred to me that there is an interesting possibility, that the people at TypeFront and/or the people at DyslexicFonts do not know that Internet Explorer supports web fonts. The people at Google do. Check out this site: Google Web Fonts that allows the free embedding of over 554 font families. All you have to do is embed a script in the page. Incidentally I've included a feature in the site that allows to set a custom Google font for yourself, but there is no visual interface for it, yet. Their problem is that they did not adopt any font for dyslexics.

So, after documenting my journey, let me give you some links to resources that explain where all these formats come from, why some fonts are free and some are not, and so on:
  • True Type font format (TTF) - you will not be surprised to hear that the standard was developed by Apple in the 1980s as a competitor to Adobe's Type 1 fonts used in PostScript. This format is supported in all browsers but Internet Explorer through the CSS3 rule @font-face.
  • Open Type (OTF) is the next version of TrueType. Paradoxically, Open Type is a registered trademark of Microsoft's, so why they choose not to support it is beyond me. OTF is also supported in all other browsers.
  • Developed in 2009, the Web Open Font Format is a container with compression and additional metadata for all the other formats. The specification was submitted by Mozilla, Opera and Microsoft. And while all browsers support it (Internet Explorer 9+, FF 3.6+, Chrome, WebKit browsers, Safari, etc., they are still limited by which of the wrapped formats they can interpret. Thus, IE9 can open a woff file, if it contains EOT inside.
  • Embedded OpenType (EOT) is Microsoft's attempt at a web standard for fonts. It allows compression and has some sort of protection against copying. These little files work (somehow) since Internet Explorer 6, when CSS3 was a dream and all "modern browsers" had nothing.
  • Comparison of layout engines (web typography) - a small article discussing browser support for web typography.
  • The history of fonts - how typefaces evolved over time.
  • Intellectual property protection of typefaces

Saturday, October 20, 2012

Låt den rätte komma in, by John Ajvide Lindqvist

I used the original name for the book, but I didn't read it in Swedish, I read it in English for obvious reasons. John Ajvide Lindqvist wrote this 2004 book and the screenplay for the 2008 Swedish movie with the same name, but not for the American version Let Me In, made in 2010.

Let the Right One In, as the title of the book translates into English, is the story of a bullied 12 year old that forms a relationship with a child vampire. And not the sparkly or stylish vampires, but the ones that kill for a living. The title comes from verses of Morrissey's song Let the Right One Slip In. Of course the Americans could not help but remake the film using beautiful people and more romance. Actually, I didn't see that version and maybe I should before I start saying bad things about it, but I did watch the Swedish version and it was a beautiful film and it was the reason for me reading the book. If you haven't seen any of the versions I highly recommend you read the book first. The film is more mellowed down, but also preserves some hints of the story in the book and has that same eerie alienated feel to it.

The movie transforms the story in a sort of romantic late childhood thing, but the book is only slightly like that as it covers uncomfortable subjects like the poor and artificial Socialist suburbs in Sweden, child gangs, bullying, paedophilia, homosexuality, murder. The story is both spooky and disturbing, but also weirdly comforting. I really don't want to spoil it, so I will end with the link to my review of the Swedish film and a short conclusion: the book is not brilliant, but it is decently written and has a good story. It would be a shame not to read it.

Friday, October 19, 2012

Showing the progress of a long running operation in a web page

We had a legacy import page in our application that took a very long time to perform its operation. Thus, the user was faced with a long loading empty page and no feedback. We wanted to do something to show the user the progress of the import without fundamentally changing the page. Of course, the best solution would have been to make the import an asynchronous background operation and then periodically get the status from the server via Ajax calls, but limited by the requirement to not change the page we came up with another solution: we would send bits of javascript while the import went on.

An attempt was made but it didn't work. All the scripts were loaded and executed at once. The user would still see an empty page, then a progress bar that immediately gets to 100%. Strange, that, since we knew that in certain circumstances, the scripts are executed as they are loaded. The answer was that browsers are caching a minimum bit of the page before they are interpreting it, about 1024 characters. The solution, then, was to send 1024 empty spaces before we start sending in the progress. This value of 1024 is not really documented or standard; it is a browser implementation thing.

Our design had the page loaded in an iframe, which allowed for scripts and html to not be loaded in the import page (thus making us stumble upon this behavior), and allowed for them to be loaded in the parent page. The scripts that we sent through the ASP.Net pipeline (using Response.Write and Response.Flush) accessed the resources from the parent page and showed a nice progress bar.

In case the page would have been a simple ASP.Net page, then the html and the CSS would have had to be sent first, perhaps instead of the 1024 spaces. There would have been problems when the page would have finished the import and the output of the page would have followed the one sent via the pipeline, but for our specific scenario it seems mere spaces and script blocks did not change the way browsers interpreted the rest of the page output.

A secondary side effect of this change was that we prevented the closing of the connection by some types of routers that need HTTP connections to have some traffic sent through them in an interval of time, providing a sort of "keep-alive". Before we made this change, these routers would simply cut the connection, leaving the user hanging.

Sunday, October 14, 2012

Blog new features

I've added functionality to remember the settings of a user in cookies, so that when you return, the choices you made are persisted. These choices include the use of important quotes, the presence of flies and cats on the blog as well as the use of dyslexic fonts! If you are dyslexic you should definitely check that option. The tools are available from both the left side of the blog as well as from the new toolbar (which doesn't seem to appear on tablets).

The toolbar I've added has more options than these tools, including a one button RSS subscription feature, a nice button for sharing the content with your friends, a list of people online on the blog, miscellaneous notifications, as well as a chat! I will try to be present in the chat so that I can answer your questions, but I am not promising anything.

Please tell me what you think of the new features. (especially if you are dyslexic :) )

Sunday, October 07, 2012

True Horror

Bear with me here, this is one of those posts that come from an idea and result in a completely different thing.

This one started with the idea that religions have an expiration date. There were a lot of religions before Christianity took hold of the world, some of them really really old. The innovation of both Christianity and Islam is that they introduced prophets, new versions of their Gods and proof that they are not dead, uncaring or otherwise absentee. So, I asked myself, is it possible that a religion has an expiration date, after which it can't support the hold on its followers and they drift away to other things, like Scientology?

Then, the second idea. In order to create a new religion, one that can be called something more than a sect, we need a prophet. Someone with a history so outrageous that people can associate it with divinity. He or she must also sacrifice themselves for their strict ideals and/or people. We also need someone who came about sooner than 2000 years.

Idea number three: Hitler! He affected the entire world, he had pretty strict ideals and has sacrificed himself for them and (presumably) for his people, whoever they might have been. Outrageous life: check. New to the scene: check. Fanatic following: check. He is the perfect prophet! Add to this his deep hatred of Jews, who can only be reasonably differentiated from other people only by their religion. Add to this the mysticism that consumed Hitler before he died and his fascination with the occult. You get a prophet that burned the world for religious reasons.

Idea number four: That idea number three must piss both sides equally much. Neonazis would probably consider it blasphemy (thus unwittingly giving strength to it). Jews... well, they are pretty pissed at Nazis. Any cult based on them would probably disagree with them, too. The other people, they would bring into the argument the horror of war and the Holocaust and other things like that. Admittedly, the God that Hitler would have been a prophet for has to be pretty twisted, but we've seen worse, as gods go. The present ones are Gandhi compared with the old bunch.

Idea number five: we've discussed a ridiculous idea and the arguments against it are pretty much liked to the horror that Hitler brought onto the world. While over 70 million people have died as a consequence of World War II, we fixate on the religious connotations of the Holocaust and the directed persecution of one people. I hope I am wrong, but when I imagine the angry masses, terrified by this idea of mine, I imagine people bringing the Jew massacre in the forefront, with pancards and signs with "Never again". And that leads me to this fifth idea: that if 6 million people being massacred for their religion and nationality is horror, then the rest of 64 million being ignored or considered casualties of "regular" war, the idea that people can be killed in the millions and it is OK, if there are political and economic reasons for it... that is true horror.