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:
Output:
Input:
Output:
You can find more examples in test.js.
Install
npm install --save-dev postcss-text-remove-gap
Usage
With Gulp:
var gulp = ;var postcss = ;var textRemoveGap = ; gulp;
Input (file styles/src/test.css
):
Output (file styles/test.css
):
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:
E
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.