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.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.
npm install --save-dev postcss-text-remove-gap
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;
}
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.