PostCSS plugin for adjusting measurements or position values like padding, margin, translateY, top, bottom, etc. based on typography class names and relevant text metrics.
The main goals of this plugin are:
Provide ability to create pixel-perfect calculations for i.e. paddings/margins/etc. based on font metrics (diacritics, text rendering box gaps) and typography rules (line-height, font-size).
Provide safe ability to describe indentation corrections based on core typography styles.
Avoid any dependency on custom style syntax that cannot be simply ignored if needed.
Support automatic creation of any dependend rules based on media queries, localizations or any specific parent selectors defined for common typography styles.
Support CSS, SCSS or whatever syntax postcss can handle via appropriate parser.
Describes base rules for main typography elements. Can be either classNames or tags.
.p1{
/* pure correction data */
font-size:12px;
line-height:18px;
font-family:Arial;
}
h1{
font:12px/18pxArial;
}
@media(min-width:1499px){
/* atRule based correction data */
.p1{
font-size:16px;
line-height:22px;
}
}
html[lang="en"].p1,
html[lang="ko"].p1{
/* selector based correction data */
font-size:18px;
line-height:24px;
font-family:Arial;
}
.p2,
.p3{
/* multiple selectors */
font-size:12px;
line-height:18px;
font-family:Arial;
}
@media(min-width:1499px){
/* atRule + selector based correction data */
html[lang="en"].p1{
font-size:20px;
line-height:26px;
}
}
CSS Input.
Example styles that should receive corrections based on core styles.
Core concept is to have common rules for all typography styles in one place - this makes much easier any transitions to new styles once design is going to be changed.
Parsed css output (before grouping media queries, rules and declarations).
Each declaration value with previously set correction template has been corrected for line-height, text rendering box gap and diacritics values of every used classname declared in core typography file.
.rule{
padding-top:19px;
}
.parent-rule.rule{
margin-top:14px;
}
@media(min-width:1499px){
.rule-inside-media{
transform:translateY(14px);
}
.parent-rule.rule-inside-media{
top:14px;
}
}
html[lang="en"].rule{
padding-top:18px;
}
html[lang="ko"].rule{
padding-top:18px;
}
@media(min-width:1499px){
.rule{
padding-top:19px;
}
}
@media(min-width:1499px){
html[lang="en"].rule{
padding-top:18px;
}
}
html[lang="en"].parent-rule.rule{
margin-top:13px;
}
html[lang="ko"].parent-rule.rule{
margin-top:13px;
}
@media(min-width:1499px){
.parent-rule.rule{
margin-top:14px;
}
}
@media(min-width:1499px){
html[lang="en"].parent-rule.rule{
margin-top:18px;
}
}
html[lang="en"].rule-inside-media{
transform:translateY(13px);
}
html[lang="ko"].rule-inside-media{
transform:translateY(13px);
}
@media(min-width:1499px){
.rule-inside-media{
transform:translateY(14px);
}
}
@media(min-width:1499px){
html[lang="en"].rule-inside-media{
transform:translateY(18px);
}
}
html[lang="en"].parent-rule.rule-inside-media{
top:13px;
}
html[lang="ko"].parent-rule.rule-inside-media{
top:13px;
}
@media(min-width:1499px){
.parent-rule.rule-inside-media{
top:14px;
}
}
@media(min-width:1499px){
html[lang="en"].parent-rule.rule-inside-media{
top:18px;
}
}
CSS Output (optimized)
With grouping media queries, rules and declarations.
2. Create text metrics data to be used for pixel-perfect correction.
Basic adjustment will only include line-height corrections.
In order to achieve pixel-perfect result plugin requires text metrics data (of each font that is used in core typography styles) to be passed to parser as an option.
Most of the time text metrics retrieving is a one time operation which can be perfomed by font-metrics tool. It will provide a json file with all required data that should be used in order to provide more neat result.
Text metrics can be created for system fonts as well as for localy or remotely hosted fonts.
Core typography parser takes into input .css file.
In case core typography styles are written with any preprocessor like sass, scss, less - they should be precompiled once before text-indentation-plugin initialization.