Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

SubPixel Font Rendering #602

Merged
merged 3 commits into from

4 participants

@rodneyrehm

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))
+ inner = document.createElement('div'),
+ width, hasSubpixelFontRendering;
+
+ // style and content
+ container.style.cssText = 'position: absolute; top: -10em; visibility:hidden; font: normal 10px arial;';
+ inner.style.cssText = 'float: left; font-size: 33.3333%;';
+ inner.textContent = 'This is a text written in Arial';
+
+ // add test <div>s to the DOM
+ container.appendChild(inner);
+ document.body.appendChild(container);
+
+ // get actual width of text
+ width = window.getComputedStyle
+ ? window.getComputedStyle(inner,null).getPropertyValue("width")
+ : '44px',
@staabm
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?

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
@ryanseddon

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!

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

@ryanseddon ryanseddon merged commit 0338d1d into from
@ryanseddon
Owner

Thanks @rodneyrehm

@renancouto

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?

@rodneyrehm

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.

@renancouto

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.

@rodneyrehm

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 with 23 additions and 0 deletions.
  1. +23 −0 feature-detects/css-subpixelfont.js
View
23 feature-detects/css-subpixelfont.js
@@ -0,0 +1,23 @@
+/*
+ * Test for SubPixel Font Rendering
+ * (to infer if GDI or DirectWrite is used on Windows)
+ * Authors: @derSchepp, @gerritvanaaken, @rodneyrehm, @yatil, @ryanseddon
+ * Web: https://github.com/gerritvanaaken/subpixeldetect
+ */
+Modernizr.addTest('subpixelfont', function() {
+ var bool,
+ styles = "#modernizr{position: absolute; top: -10em; visibility:hidden; font: normal 10px arial;}#subpixel{float: left; font-size: 33.3333%;}";
+
+ // see https://github.com/Modernizr/Modernizr/blob/master/modernizr.js#L97
+ Modernizr.testStyles(styles, function(elem) {
+ var subpixel = elem.firstChild;
+
+ subpixel.innerHTML = 'This is a text written in Arial';
+
+ bool = window.getComputedStyle
+ ? window.getComputedStyle(subpixel, null).getPropertyValue("width") !== '44px'
+ : false;
+ }, 1, ['subpixel']);
+
+ return bool;
+});
Something went wrong with that request. Please try again.