https://github.com/dmitriz/baseline-utils
Convert the more important but less accessible Baseline into the less important but more accessible CSS
https://github.com/dmitriz/baseline-utils
Last synced: 11 months ago
JSON representation
Convert the more important but less accessible Baseline into the less important but more accessible CSS
- Host: GitHub
- URL: https://github.com/dmitriz/baseline-utils
- Owner: dmitriz
- License: mit
- Created: 2016-05-17T16:00:05.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-05-01T08:30:13.000Z (about 6 years ago)
- Last Synced: 2025-04-04T21:46:42.384Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# baseline-utils
[](https://greenkeeper.io/)
Convert the more important but less accessible Baseline into the less important but more accessible CSS
## Typeface pivot lines
http://www.leabhair.ie/sob/tm/index.html
```
====== What you want to control ====== | === What you can control ===
------------------------------------------|-- Line box top edge -----
| | \ \
| | half-leading \
-- ascender line --------------- | / \
| \ \ ??--|-- Em box top edge \
| ascender-height \ | \ \
| / \ | \ \
-- mean line ------- \ | \ \
| \ \ | \ \
| x-height body-size | font-size line-height
| / / | / /
-- base line ------- / | / /
| \ / | / /
| descender-height / | / /
| / / ??--|-- Em box bottom edge /
-- descender line -------------- | \ /
| | half-leading /
| | / /
------------------------------------------|-- Line box bottom edge --
```
## Vertical box layout
```
-- Margin box top edge --------------------------------------
| \ \
| margin-top \
| / \
-- Border box top edge ----------------------- \
| \ \ \
| border-top \ \
| / \ \
-- Padding box top edge ------------- \ \
| \ \ \ \
| padding-top \ \ margin-top-to-baseline
| / \ \ /
-- Line box top edge \ border-top-to-baseline /
| \ \ / /
| half-leading padding-top-to-baseline / /
| / / / /
-- Em box top edge / / /
| \ / / /
| fontbox-top-to-baseline / / /
| / / / /
----------------------------------------- Baseline ----------
| \ \ \ \
| fontbox-bottom-to-baseline \ \ \
| / \ \ \
-- Em box bottom edge \ \ \
| \ \ \ \
| half-leading padding-bottom-to-baseline \ \
| / / \ \
-- Line box bottom edge / border-bottom-to-baseline \
| \ / / \
| padding-bottom / / margin-bottom-to-baseline
| / / / /
-- Padding box bottom edge ---------- / /
| \ / /
| border-bottom / /
| / / /
-- Border box bottom edge -------------------- /
| \ /
| margin-bottom /
| / /
-- Margin box bottom edge -----------------------------------
```
## Vertical Rhythm
```
---- Padding box edge ------------------
| \ \
| \ \
| \ \
| padding-top-to-baseline = line-height x 2
| / /
| / /
| / /
--
--------------------------------------------- baseline
| \ \
| \ \
| \ \
| padding-bottom-to-baseline = line-height x 2
| / /
| / /
| / /
----- Padding box edge -----------------
| \ \
| padding-top-to-baseline = line-height
| / /
-- --------------------------------------------- baseline
| \ \
| padding-bottom-to-baseline = line-height
| / /
----- Padding box edge -----------------
| \ \
| padding-top-to-baseline = line-height
| / /
--
line 1 --------------------------------------- baseline
| \
| line-height
| /
--
line 2 --------------------------------------- baseline
| \ \
| padding-bottom-to-baseline = line-height
| / /
---- Padding box edge ------------------
| \ \
| padding-top-to-baseline = line-height
| / /
--
line 1 --------------------------------------- baseline
| \
| line-height
| /
--
line 2 --------------------------------------- baseline
| \ \
| padding-bottom-to-baseline = line-height
| / /
---- Padding box edge ------------------
| \ \
| \ \
| \ \
| padding-top-to-baseline = line-height x 2
| / /
| / /
| / /
--
--------------------------------------------- baseline
| \ \
| padding-bottom-to-baseline = line-height
| / /
---- Padding box edge ------------------
```
## Distance conversion diagram
- CSS distance units do not matter, as long as everything is measured in the same unit
- The same diagram for both top and bottom edges
```
d2b = -------
d2l = f(d2b, lh, b2f) = d2b - b2l
/
lh = ----------- --/
b2l = half-leading + b2f = (lh - 1)/2 + b2f
/
b2f = ----/
```
## Style conversion diagram
font-size is optional and only required for units other than `em`, otherwise `fs = 1` is used.
```
---------
lh = line-height ----\ padding-top = f(pb2b, lh, b2f * fs)
fs = font-size? --------------- padding-bottom
\
pt = padding-top --------------- border-top
pb = padding-bottom --------------- border-bottom
\
bt = border-top --------------- margin-top
bb = border-bottom --------------- margin-bottom
/
<desired distance> --/
pt2b = padding-top-to-baseline
pb2b = padding-bottom-to-baseline
bt2b = border-top-to-baseline
bb2b = border-bottom-to-baseline
mt2b = margin-top-to-baseline
mb2b = margin-bottom-to-baseline
```