Skip to content
BranchesTags

Latest commit

History

4 Commits

Folders and files

NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css

Repository files navigation

Mildly Opinionated Prose Styles

Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)

Browsers offer a basic typographic system out of the box. But they can do so much more.

Likewise, fonts can offer OpenType features by default, but can do so much more.

The big idea

OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.

"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.

It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.

That's why mildly opinionated.

The things MOPS does

Generic / to decide / misc

  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?

Prose

Blog post, book, magazine article.

  • Oldstyle figures

  • Small caps in <abbr>

  • Titling caps in <h1>

  • Hyphenation in <p>

  • Hanging punctuation in <p>

  • text-wrap: pretty in <p>

  • text-wrap: balance in <h1> (only advisable for centered text)

Data

Tables.

  • Tabular numbers

Technical

A.k.a. "not prose".

  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>

How to use

Perhaps something like this:

<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>

The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.

Likewise mops-data would enable tabular numbers. How about fractions?

What (not) to do

Should it include a type scale?

Yes:

  • sounds like an essential part of a type-related stylesheet

No:

  • out of scope
  • there are several solutions for that
    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)

Should it have CSS for features that might not be in the font?

In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?

Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.

About

Mildly Opinionated Prose Stylesheet

Resources

Readme
Activity

Stars

24 stars

Watchers

4 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - RoelN/mops: Mildly Opinionated Prose Stylesheet · GitHub
Skip to content
BranchesTags
Latest commit
History
4 Commits
Folders and files
NameName
Last commit message
Last commit date
README.md
README.md
mops.css
mops.css
Repository files navigation
Mildly Opinionated Prose Styles
Or MOPS, that's the name. (But we're not just doing prose. There's also technical writing, and data, and perhaps even physics or math?)
Browsers offer a basic typographic system out of the box. But they can do so much more.
Likewise, fonts can offer OpenType features by default, but can do so much more.
The big idea
OpenType features (and some text-related features) are hard to discover. If you don't use them there won't be a problem. But if you do use them, text is going to look better.
"Better"? Yeah, we think so. You might not like all changes that are happening, but you can easily turn off what you don't like. Discoverability > dictating styles.
It's better to see your options in action, and then deciding to not use them, than to never even know those options existed.
That's why mildly opinionated.
The things MOPS does
Generic / to decide / misc
  • Font synthesis off? (Also e.g. for superscript and their faux user agent superscripts)
  • Do something with ex / cap? E.g. .size-to-cap-height utility class?
Prose
Blog post, book, magazine article.
  • Oldstyle figures
  • Small caps in <abbr>
  • Titling caps in <h1>
  • Hyphenation in <p>
  • Hanging punctuation in <p>
  • text-wrap: pretty in <p>
  • text-wrap: balance in <h1> (only advisable for centered text)
Data
Tables.
  • Tabular numbers
Technical
A.k.a. "not prose".
  • Lining numbers
  • Fractions
  • Scientific inferiors (which tag?)
  • Proper superscript for <sup>
  • Proper subscript for <sub>
How to use
Perhaps something like this:
<divclass="mops mops-story">
...
</div>
<tableclass="mops mops-data">
...
</table>
The first class, mops, sets up the basics of the system. The second class, mops-story builds on that and adds styles that work best for "book-like" typography. For example oldstyle figures, hanging punctuation, etc.
Likewise mops-data would enable tabular numbers. How about fractions?
What (not) to do
Should it include a type scale?
Yes:
  • sounds like an essential part of a type-related stylesheet
No:
  • out of scope
  • there are several solutions for that

    • How to make MOPS work with an independent system that sets font sizes? Maybe as a rule we don't interfere with any font sizes? (At least out of the box. Or maybe optionally let users wire them up to MOPS via CSS variables?)
Should it have CSS for features that might not be in the font?
In the oldstyle figures example, this only works if the font includes it. We can't know this beforehand. How to deal with that?
Superfutureidea: hook this up to the Wakamai Fondue engine. Folks can drop a font and only the features that are supported will be included.
About
Mildly Opinionated Prose Stylesheet
Resources
Readme
Activity
Stars
24 stars
Watchers
4 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages