Skip to content

Global Normalize by baerbeisser

Screenshot of Global Normalize

Details

Authorbaerbeisser

LicenseCC-BY-SA-4.0

Categoryglobal

Created

Updated

Code size6.2 kB

Code checksum996b3468

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Ever been annoyed that one Webpage has text far too small, while the next is far too large? This style does it's best to fix that, without breaking the layout.

Notes

This style has font-size: 1rem as its base. Change your browser settings if it's too big or small for your taste.
Continuously tested and improved in the wild.

Source code

/*
==UserStyle==
@name             Global Normalize
@namespace        https://example.edu/
@matches          <all_urls>
@description      Carefully balanced stylesheet to keep HTML elements consistent across the web. Works best with site-specific fonts disabled. (Change your browser settings if it's too big or too small).
@version          2.2.2
@author           Baerbeisser
@license          CC-BY-SA-4.0
==/UserStyle==
*/
/* https://html.spec.whatwg.org/multipage/rendering.html */

/**
 * font
 */

/* i use 1rem instead of names (small,medium), because 1rem is 1rem but names representation differs greatly */
/* people doing dumb shit like font-size: 60% in html root tag */
html, body, :root {
    font-size: 1rem !important;
}

/* always ugly, why people keep doing this? */
h1,h2,h3,h4,h5,h6 { text-shadow: none; }

/* setting baseline */
h1,h2,h3,h4,h5,h6,
:is(h1,h2,h3,h4,h5,h6) a {
    font-size: 1.3rem !important;
    line-height: 1.6rem !important;
    font-weight: bold !important;
}

/* show anchor tags *
article a::after {
    content: " (" attr(href) ") ";
    color: blue;
}*/

html, :root,
a, p, span, em,
blockquote, strong,
input, summary,
div, div > * {
    font-size: 1rem !important;
    font-size-adjust: none !important;
    line-height: 1.5rem !important;
}
a:hover { text-decoration: underline; }

h1,h1 >:is(a,span,strong),.h1 {font-size: 1.8rem  !important; line-height: 2rem    !important;}
h2,h2 >:is(a,span,strong),.h2 {font-size: 1.3rem  !important; line-height: 1.5rem  !important;}
h3,h3 >:is(a,span,strong),.h3 {font-size: 1.15rem !important; line-height: 1.4rem  !important;}
h4,h4 >:is(a,span,strong),.h4 {font-size: 1rem    !important; line-height: 1.2rem  !important;}
h5,h5 >:is(a,span,strong),.h5 {font-size: 0.85rem !important; line-height: 1rem    !important;}
h6,h6 >:is(a,span,strong),.h6 {font-size: 0.7rem  !important; line-height: 1rem    !important;}

a >:is(h1,h2,h3,h4,h5,h6)
{ font-size: 1.4rem !important; line-height: 2rem !important; }

:is(h1,h2,h3,h4,h5,h6) >span, /* wikipedia subtitle */
li :is(h1,h2,h3,h4,h5,h6) >:is(a,span) { font-size: 1rem !important;}

article, section,
[id*="blog"i],
[class*="blog"i],
[id*="content"i],
[class*="content"i] {
  font-size: 1rem !important;
}
.inner-wrap,
.mh-content,
:is(.container,#content):has(.sidebar):is(.inside-article,.entry-content,.post) {
    width: auto !important;
    max-width: var(--content-max-width) !important;
}

/**
 * lists
 */
dir, dd, dl, dt, menu, ol, ul {
    /*display: block !important;*/
    font-size: 1rem !important;
}
li, li:is(p,a) {
    text-align: match-parent;
    font-size: 1rem !important;
}

article, aside,
h1, h2, h3, h4, h5, h6,
hgroup, nav, section {
  display: block;
/*margin-block-start: 1rem;
  margin-block-end: 1rem;*/
}
/* should we or should we not?
input ~ div {
    height: 1.2rem !important;
    width: 1.2rem !important;
    max-height: 1.5rem !important;
    max-width: 1.5rem !important;
}*/

/* side-navs */
aside, nav a,
.reference > a { font-size: 80% !important; }


/**
 * codeblocks
 */
span > samp,
span > code,
.s-prose :not(.s-code-block) > code,
[class^="code-"],[id^="code-"],
[class$="-code"],[id$="-code"],
[class^="code-"] *,[id^="code-"] *,
[class$="-code"] *,[id$="-code"] *,
code, pre,
code span,
#highlight,
.highlight,
.ace_editor {
    font-size: 0.9rem !important;
    font-family: monospace;
    overflow-x: scroll;
}

/**
 * tables
 */

/*td:empty { display: none; }*/

table { display: table; }
caption { display: table-caption; }
colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th { display: table-cell; }

colgroup[hidden], col[hidden],
thead[hidden], tbody[hidden], tfoot[hidden], tr[hidden] {
  visibility: collapse;
}

table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

thead, tbody, tfoot, table > tr { vertical-align: middle !important; }
tr, td, td:has(>:is(li,div,p)), th {
    vertical-align: inherit !important;
    line-height: 1.3em !important;
    font-size: 1rem !important;
}
thead {
    font-size: medium !important;
    line-height: 1.2em !important;
}

/*
* fixes for some frameworks
*/
:root {
    --wb-ds-size-scale: 1; /* meteoschweiz.admin.ch, Adobe Experience Manager? */
}

/*
* fixes for some big sites doing stupid things
*/
.article-hero__title {
    font-size: 1.8rem !important;
    line-height: 2rem !important;
}

/* some forums making posts smaller because of font-size (??) */
.messageContent { min-width: 100%; }

h3.LC20lb,
h3 >a.l { /* Google search */
    font-size: 1rem !important;
    line-height: 1.2rem  !important;
}

/* duckduckgo images scroll */
.tileview--grid .tile {
    overflow-y: hidden;
}

/* github... listen, there's a <code> tag for code */
.blob-code-content > table *,
.highlight-source-shell * {
    font-size: 0.8rem !important;
}

/*
* Experimental
*/

/* some sites really have no padding around text. Hope it breaks nothing */
body >p {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* why was this a bad idea again? */
div >p {
    font-size: 1rem !important;
}

/*
article, section,
[id*="blog"i],
[class*="blog"i],
[id*="content"i],
[class*="content"i] {
  min-width: 45rem !important;
}
article, section {
  min-width: 45rem;
} breaks Galaxus */

/**
 * view
 *
main,
article,
article div {
    max-width: var(--content-max-width) !important;
}
article img { max-width: 40rem; }
#container, .container,
#content, .content,
.post-inner { min-width: 50vw !important; }
*/
/* unbreak *
#js-repo-pjax-container { max-width: unset !important; }
*/

/* pages with article *and* sidebar squeezed in content are small already *
:is(.container,#content):not(:has(.sidebar)) {
    min-width: 45rem;
}*/

Reviews

No reviews yet.