postcss-text-remove-gap

PostCSS plugin to remove space before and after text strings, added by line-height and extra space in glyph itself.

New CSS property:

text-remove-gap: outside? <type> <line-height>? <font-family>?;

• outside – if specified, remove gaps outside the block (using margins on block itself instead of margins of internal pseudo-elements).
• type – is only required value, can be:
  • before – remove gap before (above) block,
  • after – remove gap after (below) block,
  • both – remove gaps before and after block.
• line-height – overwrite line-height value.
• font-family – overwrite font-family value.

Example

Illustration:

Before:

After:

Input:

p
{
    font: 16px/1.5 "Arial", sans-serif;
    text-remove-gap: both;
}

Output:

p
{
    font: 16px/1.5 "Arial", sans-serif;
}
p::before
{
    display: table;
    content: "";
    margin-bottom: -0.63em;
}
p::after
{
    display: table;
    content: "";
    margin-top: -0.67em;
}

Input:

p
{
    font-family: "Arial", sans-serif;
    line-height: 1.5;
    text-remove-gap: outside both;
}

Output:

p
{
    font-family: "Arial", sans-serif;
    line-height: 1.5;
    margin-top: -0.63em;
    margin-bottom: -0.67em;
}

You can find more examples in test.js.

Install

npm install --save-dev postcss-text-remove-gap

Usage

With Gulp:

var gulp = require( 'gulp' );
var postcss = require( 'gulp-postcss' );
var textRemoveGap = require( 'postcss-text-remove-gap' );

gulp.task(
    'styles',
    function ()
    {
        var textRemoveGapOptions = {
            prefix: 'm18',
            fonts: {
                'My Font': [0.1, 0.2],
                'My Other Font': [0.12, 0.14]
            },
            defaultFontFamily: 'My Font'
        };

        gulp.src( './styles/src/**/*.css' )
            .pipe( postcss( [textRemoveGap( textRemoveGapOptions )] ) )
            .pipe( gulp.dest( './styles/' ) );
    }
);

Input (file styles/src/test.css):

p
{
    font: 16px/1.5 "Arial", sans-serif;
    -m18-text-remove-gap: both;
}

div.other p
{
    font-family: "Arial", sans-serif;
    line-height: 1.5;
    -m18-text-remove-gap: outside both;
}

li
{
    line-height: 2;
    -m18-text-remove-gap: both;
}

blockquote
{
    font-family: "My Other Font", sans-serif;
    line-height: 2;
    -m18-text-remove-gap: both;
}

Output (file styles/test.css):

p
{
    font: 16px/1.5 "Arial", sans-serif;
}

p::before
{
    display: table;
    content: "";
    margin-bottom: -0.38em;
}

p::after
{
    display: table;
    content: "";
    margin-top: -0.42em;
}

div.other p
{
    font-family: "Arial", sans-serif;
    line-height: 1.5;
    margin-top: -0.38em;
    margin-bottom: -0.42em;
}

li
{
    line-height: 2;
}

li::before
{
    display: table;
    content: "";
    margin-bottom: -0.6em;
}

li::after
{
    display: table;
    content: "";
    margin-top: -0.7em;
}

blockquote
{
    font-family: "My Other Font", sans-serif;
    line-height: 2;
}

blockquote::before
{
    display: table;
    content: "";
    margin-bottom: -0.62em;
}

blockquote::after
{
    display: table;
    content: "";
    margin-top: -0.64em;
}

Options

prefix

Type: string
Default: '' (empty, no prefix)

Adds the prefix surrounded by dashes before the property name.

fonts

Type: object
Default: {}

Object with spaces for custom fonts.

{
    "Font Name": [spaceBefore, spaceAfter]
}

Values spaceBefore and spaceAfter are numbers 0..1 representing the ratio of the space before and after text to the font size (percentages/100%).

The best way to calculate this values is to create block with background color and required font. Set line-height to 1 and font-size to 100px. Write “E” character or other simular to easily find top and bottom boundary of it. Measure the distance from the block boundary to the character.

For example:

div
{
    font: 100px/1 "Open Sans", sans-serif;
    background: gray;
}

<div>E<div>

Plugin has build-in database with fonts metrics in file fonts.json.
You can contribute new common fonts with pull request, or just use your own collection with this option.

defaultFontFamily

Type: string | string[]
Default: 'serif'

Font to use when no other font specified. Used when CSS block has no font-family, font, or font-family value of plugin property specified.

defaultLineHeight

Type: number
Default: 1

Line-height to use when no other line-height specified. Used when CSS block has no line-height, font with line-height, or line-height value of plugin property specified.