In order to rate the readability of text on a web page, Can You Read It Now has to do all of the following:
- Get access to the page contents
- Find the text to be analyzed
- Get the displayed style of each piece of text
- Calculate ratings for each aspect of readability
- Display the ratings to the user
Accomplishing all of this with one click from the user required making several different trade-offs and design decisions. Let’s cover each of these in turn.
Get access to the page contents
One pain point of building bookmarklets from a development standpoint is that you can’t update the code once it’s been saved. This can be mitigated by saving only code to load updatable script from a hosted location (like canyoureaditnow.com).
Find the text to be analyzed
Get the displayed style of each piece of text
Once we’ve got a handle to the container of the text to analyze, we can use jQuery’s css method to grab the computed CSS properties of each element.
Calculate ratings for each aspect of readability
Style data from each piece of text and the elements nearby are used to calculate ratings which are then weighted by how much of the document by character count this text represents. This is how a tree of DOM elements gets rated and turned into one set of scores for the entire page.
Display the results
That’s all I have to say about CYRIN for now. If you have any questions feel free to contact me at email@example.com.
Until next time.