Home

Awesome

grunt-typeset

A Grunt wrapper for Typeset

Typeset is an HTML pre-proces­sor for web ty­pog­ra­phy. It uses no client-side JavaScript and gives you hang­ing punc­tu­a­tion, soft hy­phen in­ser­tion, op­ti­cal mar­gin out­dents, small-caps con­ver­sion and punctuation substitution.

Getting started

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

Installation

npm install grunt-typeset --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-typeset');

CSS

Tweak or add the following CSS:

/* Small caps */
/*.small-caps {font-variant: small-cap;}*/

/* Double quote (") marks */
.pull-double{margin-left:-.46em}
.push-double{margin-right:.46em}

/* Single quote (') marks */
.pull-single{margin-left:-.27em}
.push-single{margin-right:.27em}

.pull-double, .push-double,
.pull-single, .push-single {display: inline-block}

/* Optical margin alignment for particular letters */
.pull-T, .pull-V, .pull-W, .pull-Y {margin-left: -0.07em}
.push-T, .push-V, .push-W, .push-Y {margin-right: 0.07em}

.pull-O, .pull-C, .pull-o, .pull-c {margin-left: -0.04em}
.push-O, .push-C, .push-o, .push-c {margin-right: 0.04em}

.pull-A {margin-left: -0.03em}
.push-A {margin-right: 0.03em}

Settings

Options

You can pass the following options object:

typeset: {
    options: {
        ignore: '.skip, #skip', // string of a CSS selector to skip
        only: '#only-typeset, .only-typeset', // string of a CSS selector to only apply typeset,
        disable: '', // [quotes, hyphenate, ligatures, smallCaps, punctuation, hangingPunctuation, spaces]
        dest: 'dist' // default destination folder
    }
}

Example 1:

// ! typeset options
module.exports = grunt => {
    grunt.initConfig({
        typeset: {
            options: {
                ignore: '.skip, #skip',
                only: '#only-typeset, .only-typeset',
                disable: 'smallCaps',
                dest: 'dist',
            },
            src: [
                'test/*.html',
                'test/**/*.html'
            ]
        }
    });
};

Example 2:

// ! custom tasks
module.exports = grunt => {
    grunt.initConfig({
        typeset: {

            // ! grunt typeset:custom_task1
            custom_task1: {
                options: {
                    only: '.only-typeset',
                    disable: 'smallCaps',
                    dest: 'dist',
                },
                src: ['test/task1.html']
            },

            // ! grunt typeset:custom_task2
            custom_task2: {
                options: {
                    ignore: '.skip, #skip',
                    only: '#only-typeset, .only-typeset',
                    dest: 'dist',
                },
                src: ['test/task2.html']
            },

        }
    });
};

Disable features

The following features may be disabled:

Info

This plugin is compatible with Grunt ^1.0.3

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.