Typography Plugin for Grunt

Gruntograph is a typography plugin for Grunt that makes text and HTML pretty.

It puts non-breaking spaces after prepositions, conjunctions, and short words. It changes “programmer quotes” to correct ones and fixes nested quotes. It replaces hyphens with dashes where needed and puts a short dash in ranges of numbers. It makes abbreviations small-caps and puts thin spaces in numbers and before currency signs. Knows only Russian for now.


To install the plugin, go to the project folder via terminal and call the command:

npm install grunt-contrib-groontograf --save-dev


Example Grunt file:

	"groontograf": {
		"compile": {
			"options": {
				"hang": true,
				"abbr": true,
				"halfSpaces": true,
				"styles": "inline"
			"files": {
				"dest/pretty.html": "src/ugly.html"

The plugin supports these settings:

  • hang (boolean), defaults to true, makes hanging punctuation;
  • abbr (boolean), by default true, makes abbreviations smallcapsed;
  • halfSpaces (boolean), defaults to true, puts thin spaces;
  • styles (string), the default inline, determines where to write the styles.

By default, Gruntograph writes styles to the style attribute of elements. If this doesn’t work for you, write in options:

	"styles": "class",
	"abbrClassName": "smallcaps",
	"hangClassName": ["hp_quote_space", "hp_quote", "hp_bracket_space", "hp_bracket"],
	"halfSpaceClassName": "halfspace"

Then instead of inline styles, Gruntograph will inject classes from the hangClassName, abbrClassName and halfSpaceClassName options. It’s recommended to use the styles file from the package if you don’t want to define styles for these classes yourself.


Send your suggestions and ideas to bespoyasov@me.com!