{"id":18032362,"url":"https://github.com/dmitriz/baseline-utils","last_synced_at":"2025-08-03T11:05:52.151Z","repository":{"id":146745983,"uuid":"59037537","full_name":"dmitriz/baseline-utils","owner":"dmitriz","description":"Convert the more important but less accessible Baseline into the less important but more accessible CSS","archived":false,"fork":false,"pushed_at":"2020-05-01T08:30:13.000Z","size":35,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T21:46:42.384Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmitriz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-17T16:00:05.000Z","updated_at":"2020-07-30T12:34:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"c971a767-1d9b-4ef3-b138-d38689a1a03b","html_url":"https://github.com/dmitriz/baseline-utils","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dmitriz/baseline-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Fbaseline-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Fbaseline-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Fbaseline-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Fbaseline-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitriz","download_url":"https://codeload.github.com/dmitriz/baseline-utils/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Fbaseline-utils/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268531912,"owners_count":24265250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-30T10:13:09.634Z","updated_at":"2025-08-03T11:05:52.111Z","avatar_url":"https://github.com/dmitriz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# baseline-utils\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/dmitriz/baseline-utils.svg)](https://greenkeeper.io/)\n\nConvert the more important but less accessible Baseline into the less important but more accessible CSS\n\n\n## Typeface pivot lines\nhttp://www.leabhair.ie/sob/tm/index.html\n\n![](http://www.leabhair.ie/sob/tm/tm1.jpg)\n\n```\n======  What you want to control  ======  |  ===  What you can control  ===\n\n\n------------------------------------------|-- Line box top edge -----\n|                                         |       \\                  \\\n|                                         |       half-leading        \\\n-- ascender line ---------------          |       /                    \\  \n|                   \\           \\     ??--|-- Em box top edge           \\\n|               ascender-height  \\        |       \\                      \\\n|                   /             \\       |        \\                      \\\n-- mean line -------               \\      |         \\                      \\\n|                   \\               \\     |          \\                      \\\n|               x-height        body-size |       font-size             line-height\n|                   /               /     |          /                      /\n-- base line -------               /      |         /                      /\n|                   \\             /       |        /                      /\n|               descender-height /        |       /                      /\n|                   /           /     ??--|-- Em box bottom edge        /\n-- descender line --------------          |       \\                    /\n|                                         |       half-leading        /\n|                                         |       /                  /\n------------------------------------------|-- Line box bottom edge --\n```\n\n\n## Vertical box layout\n\n```\n-- Margin box top edge --------------------------------------\n|           \\                                                \\\n|         margin-top                                          \\\n|           /                                                  \\\n-- Border box top edge -----------------------                  \\\n|           \\                                 \\                  \\\n|        border-top                            \\                  \\\n|           /                                   \\                  \\\n-- Padding box top edge -------------            \\                  \\\n|           \\                        \\            \\                  \\\n|        padding-top                  \\            \\ margin-top-to-baseline\n|           /                          \\            \\                /\n-- Line box top edge                    \\ border-top-to-baseline    /\n|           \\                            \\          /              /\n|        half-leading   padding-top-to-baseline    /              /\n|           /                            /        /              /\n-- Em box top edge                      /        /              /\n|           \\                          /        /              /\n|        fontbox-top-to-baseline      /        /              / \n|           /                        /        /              /\n----------------------------------------- Baseline ----------\n|           \\                        \\        \\              \\\n|        fontbox-bottom-to-baseline   \\        \\              \\\n|           /                          \\        \\              \\\n-- Em box bottom edge                   \\        \\              \\\n|           \\                            \\        \\              \\\n|        half-leading   padding-bottom-to-baseline \\              \\\n|           /                            /          \\              \\\n-- Line box bottom edge                 / border-bottom-to-baseline \\\n|           \\                          /            /                \\\n|        padding-bottom               /            / margin-bottom-to-baseline\n|           /                        /            /                  /\n-- Padding box bottom edge ----------            /                  /\n|           \\                                   /                  /\n|        border-bottom                         /                  /\n|           /                                 /                  /\n-- Border box bottom edge --------------------                  /\n|           \\                                                  /\n|        margin-bottom                                        /\n|           /                                                /\n-- Margin box bottom edge -----------------------------------\n```\n\n\n## Vertical Rhythm\n```\n---- Padding box edge ------------------\n|           \\                           \\\n|            \\                           \\\n|             \\                           \\\n|        padding-top-to-baseline    = line-height x 2\n|             /                           /\n|            /                           /\n|           /                           /\n-- \u003ch2\u003e --------------------------------------------- baseline\n|           \\                           \\\n|            \\                           \\\n|             \\                           \\\n|        padding-bottom-to-baseline = line-height x 2\n|             /                           /\n|            /                           /\n|           /                           /\n----- Padding box edge -----------------\n|           \\                           \\\n|        padding-top-to-baseline    = line-height\n|           /                           /           \n-- \u003ch3\u003e --------------------------------------------- baseline\n|           \\                           \\   \n|        padding-bottom-to-baseline = line-height    \n|           /                           /\n----- Padding box edge -----------------           \n|           \\                           \\\n|        padding-top-to-baseline    = line-height\n|           /                           /\n-- \u003cp\u003e line 1 --------------------------------------- baseline\n|                                       \\\n|                                     line-height\n|                                       /\n-- \u003cp\u003e line 2 --------------------------------------- baseline\n|           \\                           \\\n|        padding-bottom-to-baseline = line-height\n|           /                           /\n---- Padding box edge ------------------           \n|           \\                           \\\n|        padding-top-to-baseline    = line-height\n|           /                           /\n-- \u003cp\u003e line 1 --------------------------------------- baseline\n|                                       \\\n|                                     line-height\n|                                       /\n-- \u003cp\u003e line 2 --------------------------------------- baseline\n|           \\                           \\\n|        padding-bottom-to-baseline = line-height\n|           /                           /\n---- Padding box edge ------------------\n|           \\                           \\\n|            \\                           \\\n|             \\                           \\\n|        padding-top-to-baseline    = line-height x 2  \n|             /                           / \n|            /                           /\n|           /                           /\n-- \u003ch3\u003e --------------------------------------------- baseline\n|           \\                           \\\n|        padding-bottom-to-baseline = line-height\n|           /                           /\n---- Padding box edge ------------------\n```\n\n\n\n## Distance conversion diagram\n- CSS distance units do not matter, as long as everything is measured in the same unit\n- The same diagram for both top and bottom edges\n\n```\nd2b = \u003cdesired distance to Baseline\u003e ------- \u003ccalculated distance to Line box Edge\u003e\n                                              d2l = f(d2b, lh, b2f) = d2b - b2l\n                                                                   /  \nlh  = \u003cCSS line-height\u003e ----------- \u003cbaseline to Line box Edge\u003e --/\n                             b2l = half-leading + b2f = (lh - 1)/2 + b2f\n                                                     /\nb2f = \u003cdistance from Baseline to Font box Edge\u003e ----/\n```\n\n\n## Style conversion diagram\nfont-size is optional and only required for units other than `em`, otherwise `fs = 1` is used.\n\n```\n\u003cComputed Style\u003e    --------- \u003cStyle Modification to assign\u003e\nlh = line-height    ----\\            padding-top    = f(pb2b, lh, b2f * fs)\nfs = font-size?     ---------------  padding-bottom\n                          \\\npt = padding-top    ---------------  border-top\npb = padding-bottom ---------------  border-bottom\n                             \\\nbt = border-top     ---------------  margin-top\nbb = border-bottom  ---------------  margin-bottom\n                      /\n\u003cdesired distance\u003e --/\npt2b = padding-top-to-baseline\npb2b = padding-bottom-to-baseline\nbt2b = border-top-to-baseline\nbb2b = border-bottom-to-baseline\nmt2b = margin-top-to-baseline\nmb2b = margin-bottom-to-baseline\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriz%2Fbaseline-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitriz%2Fbaseline-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriz%2Fbaseline-utils/lists"}