To consistently use amonospaced font with well-designed characters for coding so as to clearly distinguish betweenl,1, andI, and betweenO and0, and between-,−,–, and—, the system-default monospaced font can be changed: If you like it as-is, you can simply@import (transclude) it: seemeta:User:SMcCandlish/codefont.css for quick instructions. Otherwise, copy one of the code snippets below to yourSpecial:MyPage/common.css ormeta:Special:MyPage/global.css page, replacing"Roboto Mono" in the code with your preferred coding font. (Roboto Mono was used in this example as it is good, free coding font, for user-editable material on the wiki). This code will: - Apply a consistent monospace font of choice to all the normally monospaced HTML elements like
<code>,<pre>, etc. - Fallback to system-defaultmonospace font, should the chosen font be unavailable or lack the necessary characters.
- Do the same for the output of allExample-formatting templates, such as
{{mxt}} and{{xt}}. - Apply to additional site-wide classes identified so far (e.g.,
.monospaced) 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.
- If any additionalclasses are known that should be added, please update this page or mention it onthe talk page.
Horizontal style /* Use my font, when available, for code */code,pre,samp,kbd,tt,.example-mono,.userlinks-username,.monospaced,.keyboard-key,.button,.plaincode{font-family:"Roboto Mono",monospace!important;}/* Make some of the editable stuff monospaced */#wpTextbox1,#wpSummary,#searchInput,#searchText{font-family:"Roboto Mono",monospace!important;}Vertical style /* Use my font, when available, for code */code,pre,samp,kbd,tt,.example-mono,.userlinks-username,.monospaced,.keyboard-key,.button.plaincode{font-family:"Roboto Mono",monospace!important;}/* Make some of the editable stuff monospaced */#wpTextbox1,#wpSummary,#searchInput,#searchText{font-family:"Roboto Mono",monospace!important;}Cleanup efforts If you'd like to help clean up instances of the<tt>...</tt> element – which has been discouraged since the 1990s, and should usually be replaced with<code>...</code> (this may vary by context) – you can add something like the following to yourcommon.css to make<tt> stick out like a sore thumb: /* Flag bad code for cleanup */tt{color:DarkRed;background:Pink;}You can also do this with<font>,<center>,<strike>, and otherdeprecated elements. For CSS you can just import for this, seemeta:User:SMcCandlish/lint.css. |