Content deleted Content added
SMcCandlish (talk | contribs) ce |
c/e |
||
| (32 intermediate revisions by 6 users not shown) | |||
Line 1:
<noinclude>{{Wikipedia how-to}}</noinclude><includeonly><div style="float:right; padding:0 1em;">{{navbar|Mxt/User CSS for a monospaced coding font|plain=y}}</div></includeonly>
To consistently use a [[monospaced font]] with well-designed characters for coding so as to clearly distinguish between <code>l</code>, <code>1</code>, and <code>I</code>, and between <code>O</code> and <code>0</code>, and between <code>-</code>, <code>−</code>, <code>–</code>, and <code>—</code>, the system-default monospaced font can be changed:
Add something like one of the code snippets below into your <samp>[[Special:MyPage/common.css]]</samp> page, replacing <kbd>"Roboto Mono"</kbd> with whatever your preferred coding font is (Roboto Mono was picked as a freely-available coding font [https://fonts.google.com/specimen/Roboto+Mono] for this example).▼
If like it as-is, you can simply <code>@import</code> (transclude) it: see [[meta:User:SMcCandlish/codefont.css]] for quick instructions.
This code will do the following:▼
* Apply a consistent monospace font of your choice (and the fallback system-default <samp>monospace</samp>, should that font go missing or not have characters you need) to all the normally monospaced HTML elements like {{tag|code|o}}, {{tag|pre|o}}, etc.▼
* Do the same for additional site-wide classes (as identified so far, e.g. <code>.userlinks</code>) that output as monospace.▼
* Make the three most frequently encountered editing fields also use this font stack: the main editing window, the edit summary line, and the search entry box.▼
▲
▲* Apply a consistent monospace font of
* Fallback to system-default {{samp|monospace}} font, should the chosen font be unavailable or lack the necessary characters.
* Do the same for the output of all [[:Category:Example-formatting templates|Example-formatting templates]], such as {{tlx|mxt}} and {{tlx|xt}}.
▲*
▲* Make the three most frequently encountered editing fields also use this font stack: the main editing window, the edit summary line, and the search entry box.
* If any additional [[Class (computer programming)|classes]] are known that should be added, please update this page or mention it on [[Template talk:Mxt/User CSS for a monospaced coding font|the talk page]].
<!--DO NOT ADD var TO THIS LIST! It must be able to inherit the font of surrounding text, because it is used outside code, as in "If <var>A</var> then <var>B</var>", and in math equations.-->
'''Horizontal style'''
{{syntaxhighlight|lang=css|1=
/* Use my font
code, pre, samp, kbd, tt
/* Make some of the editable stuff monospaced */
#wpTextbox1, #wpSummary, #searchInput, #searchText { font-family: "Roboto Mono", monospace !important; }
}}
'''Vertical style'''
{{syntaxhighlight|lang=css|1=
/* Use my font
code,
pre,
Line 28 ⟶ 32:
kbd,
tt,
.userlinks,▼
.example-mono,
▲.userlinks-username,
.monospaced,
.keyboard-key,
.button
.plaincode {
font-family: "Roboto Mono", monospace !important;
}
Line 38 ⟶ 43:
#wpTextbox1,
#wpSummary,
#searchInput
#searchText {
font-family: "Roboto Mono", monospace !important;
}
}}
{{anchor|Cleanup efforts}}'''Cleanup efforts'''
If you'd like to help clean up instances of the {{tag|tt}} element – which has not been valid HTML since the 1990s, and should usually be replaced with {{tag|code}} (this may vary by context) – you can add something like the following to your <samp>common.css</samp> to make {{tag|tt|o}} stick out like a sore thumb:▼
▲If you'd like to help clean up instances of the {{tag|{{!mxt|tt}}}} element – which has
{{syntaxhighlight|lang=css|1=
Line 49 ⟶ 57:
tt { color: DarkRed; background: Pink; }
}}
You can also do this with {{tag|font|o}}, {{tag|center|o}}, {{tag|strike|o}}, and other [[Wikipedia:HTML 5#Obsolete elements and attributes|deprecated elements]]. For CSS you can just import for this, see [[meta:User:SMcCandlish/lint.css]].<noinclude><!--
{{Documentation|content=This is a documentation snippet page transcluded (without the banner or this doc section) into other template documentation for consistency. It takes no parameters. ▼
▲-->{{Documentation|content=This is a documentation snippet page transcluded (without the banner or this doc section) into other template documentation, and into [[Help:User style]], for consistency. It takes no parameters.
Typical usage:
<syntaxhighlight lang="wikitext">
== User CSS for a monospaced coding font ==
{{collapse top|left=y|title=Have monospaced templates in this group – and your editing window – use your preferred monospaced font:}}
{{Mxt/User CSS for a monospaced coding font}}
{{collapse bottom}}
</syntaxhighlight>
It can also be used as a stand-alone how-to page; a redirect to it, [[Help:User CSS for a monospaced coding font]], is categorized as such. It is also transcluded as a section, at [[Help:User style#User CSS for a monospaced coding font]].
{{Wikipedia technical help}}
[[Category:Documentation templates]]
<!--End documentation.-->}}</noinclude>
| |||