Skip to content
This repository

SubPixel Font Rendering #602

Merged
merged 3 commits into from about 2 years ago

4 participants

Rodney Rehm Ryan Seddon Renan Couto Markus Staab
Rodney Rehm

Here's a test to determine if a browser has support for SubPixel Font Rendering. (DirectWrite vs. GDI on Windows, for example).

This could be used to switch fonts in case SubPixel Font Rendering is not supported and another font would look better.

feature-detects/css-subpixelfont.js
((10 lines not shown))
  10 + inner = document.createElement('div'),
  11 + width, hasSubpixelFontRendering;
  12 +
  13 + // style and content
  14 + container.style.cssText = 'position: absolute; top: -10em; visibility:hidden; font: normal 10px arial;';
  15 + inner.style.cssText = 'float: left; font-size: 33.3333%;';
  16 + inner.textContent = 'This is a text written in Arial';
  17 +
  18 + // add test <div>s to the DOM
  19 + container.appendChild(inner);
  20 + document.body.appendChild(container);
  21 +
  22 + // get actual width of text
  23 + width = window.getComputedStyle
  24 + ? window.getComputedStyle(inner,null).getPropertyValue("width")
  25 + : '44px',
2
Markus Staab
staabm added a note

seems like you don't need this constant/magic-value at all. just checkin with window.getComputedStyle should do the trick?

Rodney Rehm
rodneyrehm added a note

you are right, obviously. I removed the variable width and the unnecessary assignment. thx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Ryan Seddon

Since Modernizr runs in the head you can't rely on the body being available. Running your tests throws an error that document.body is undefined.

We also have some API methods available to help you avoid edges cases when injecting elements in the page, take a look at a rewrite of your test I did using Modernizr.testStyles. http://jsfiddle.net/MEBap/2/

Looks simple enough after reading the code of injectElementWithStyles(). The docs on testStyles() don't mention the params nodes and testnames. Thanks!

Owner

Good point I'll do an update to the docs.

Ryan Seddon ryanseddon merged commit 0338d1d into from
Ryan Seddon
Owner

Thanks @rodneyrehm

Renan Couto

Is this feature working right? I'm getting no-subpixelfont (false) every time.
I've tested on Firefox 14 with DirectWrite enabled (true (6.1.7601.17789)), it supposed to return true, right?

Rodney Rehm

There is an issue with initial page zoom. If the page is zoomed, this test currently fails (and we don't have a clue how to circumvent that, yet).
Other than that it should work, yes.

Renan Couto

Thanks for the reply, but I'm still getting false. Here's the example: http://jsfiddle.net/fHUvY/
I got false on Firefox, Chrome and Opera (at least on FF should it should get true, since I checked on the about:support and the DirectWrite was enabled) and only got true on IE9. I tested on Windows 7 with a GeForce 9400 GT graphics card.

Rodney Rehm

Might detect-zoom help identify the initial zoom level? Looks like an awful lot of code to load for "a simple test", though

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 23 additions and 0 deletions. Show diff stats Hide diff stats

  1. +23 0 feature-detects/css-subpixelfont.js
23 feature-detects/css-subpixelfont.js
... ... @@ -0,0 +1,23 @@
  1 +/*
  2 + * Test for SubPixel Font Rendering
  3 + * (to infer if GDI or DirectWrite is used on Windows)
  4 + * Authors: @derSchepp, @gerritvanaaken, @rodneyrehm, @yatil, @ryanseddon
  5 + * Web: https://github.com/gerritvanaaken/subpixeldetect
  6 + */
  7 +Modernizr.addTest('subpixelfont', function() {
  8 + var bool,
  9 + styles = "#modernizr{position: absolute; top: -10em; visibility:hidden; font: normal 10px arial;}#subpixel{float: left; font-size: 33.3333%;}";
  10 +
  11 + // see https://github.com/Modernizr/Modernizr/blob/master/modernizr.js#L97
  12 + Modernizr.testStyles(styles, function(elem) {
  13 + var subpixel = elem.firstChild;
  14 +
  15 + subpixel.innerHTML = 'This is a text written in Arial';
  16 +
  17 + bool = window.getComputedStyle
  18 + ? window.getComputedStyle(subpixel, null).getPropertyValue("width") !== '44px'
  19 + : false;
  20 + }, 1, ['subpixel']);
  21 +
  22 + return bool;
  23 +});

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.