Apply CSS based on your browser's text rendering engine

Bram Stein

Last update: Dec 6, 2022

Related tags

CSS trmix

Overview

Type Rendering Mix

Type Rendering Mix website

Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user agent string. It will then add two classes to your HTML element. One class will describe the text rasterizer and the other the antialiasing method it is using:

The text rasterizer class name can take the following values:

tr-coretext for OS X and iOS;
tr-gdi for Windows XP and Windows Vista SP1;
tr-directwrite for Windows Vista SP2 and above;
tr-freetype for Android and Linux.

The antialiasing method class name will be one of the following:

tr-aa-none when no antialiasing is applied;
tr-aa-grayscale when grayscale antialiasing is applied;
tr-aa-subpixel when subpixel antialiasing is applied.

If Type Rendering Mix can’t determine the antialiasing method with absolute certainty it will attempt to guess. In this case unknown will be added to the class name:

tr-aa-unknown-none when no antialiasing is guessed;
tr-aa-unknown-grayscale when grayscale antialiasing is guessed;
tr-aa-unknown-subpixel when subpixel antialiasing is guessed.

When it is impossible to determine or guess the text rasterizer and antialiasing method tr-unknown and tr-aa-unknown will be used to indicate an unknown text rasterizer and antialiasing method.

Usage

Download the latest version at http://www.typerendering.com and include it in your page:

If you are using Bower you can install Type Rendering Mix using:

bower install trmix

Comments

Minified and unminified files

It might be useful to include an unminified version of trmix in the dist folder, and rename the actual file to trmix.min.js.

Not only because it's easier for people to read the code and learn how it's done, but also because it's standard practice in frontend JS libraries. That would also let people concat all the libraries in their projects, and then run minification and the very end.

It seems that grunt-closure-compiler minifies by default, and I've been through its options and couldn't find an option to avoid that.

opened by paulozoom 2
Add Bower support and Grunt task to create 'dist/trmix.js'

This builds on top of https://github.com/bramstein/trmix/pull/1 with additional grunt task.

Created as a separate pull request because it's such a small task that it may be unnecessary to automate with Grunt.

opened by paulozoom 0