Template:Mxt/User CSS for a monospaced coding font - Revision history

WikiDwarfBOT: clean up, replaced: Wikipedia → Bharatpedia (2)

2021-06-08T14:29:41Z

clean up, replaced: Wikipedia → Bharatpedia (2)

← Older revision		Revision as of 19:59, 8 June 2021
Line 1:		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>		<noinclude>{{Bharatpedia how-to}}</noinclude><includeonly><div style="float:right; padding:0 1em;">{{navbar\|Mxt/User CSS for a monospaced coding font\|plain=y}}</div></includeonly>
	You can consistently use a monospaced font with well-designed characters for coding (e.g., to distinguish clearly 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>).		You can consistently use a monospaced font with well-designed characters for coding (e.g., to distinguish clearly 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>).

Line 70:		Line 70:

	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]].		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}}		{{Bharatpedia technical help}}
	[[Category:Template documentation]]		[[Category:Template documentation]]
	<!--End documentation.-->}}</noinclude>		<!--End documentation.-->}}</noinclude>

WikiDwarfBOT: /* top */clean up, replaced: Wikipedia: → Bharatpedia:

2021-05-31T13:20:06Z

top: clean up, replaced: Wikipedia: → Bharatpedia:

← Older revision		Revision as of 18:50, 31 May 2021
Line 57:		Line 57:
	}}		}}

	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><!--		You can also do this with {{tag\|font\|o}}, {{tag\|center\|o}}, {{tag\|strike\|o}}, and other [[Bharatpedia: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, and into [[Help:User style]], 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.

WikiDwarf: 1 revision imported

2021-04-25T03:27:06Z

1 revision imported

← Older revision	Revision as of 08:57, 25 April 2021
(No difference)

>SMcCandlish: A more serious test of your font. Update about pages transcluding this.

2021-03-21T04:51:19Z

A more serious test of your font. Update about pages transcluding this.

New page

<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>
You can consistently use a monospaced font with well-designed characters for coding (e.g., to distinguish clearly 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>).

Add something like one of the code snippets below into your {{samp|[[Special:MyPage/common.css]]}} page, replacing {{kbd|"Roboto Mono"}} with whatever your preferred coding font is ([https://fonts.google.com/specimen/Roboto+Mono Roboto Mono] was picked as a freely-available coding font for this example).

If you don't want to manually add this code to your CSS page but would rather <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}}, 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 the classes used by {{tlx|mxt}} and other monospaced templates in the {{tlx|xt}} family
* Do the same for additional site-wide classes (as identified so far, e.g. <code>.monospaced</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.

If you know of an additional class to add here, please update this page or mention it on [[Template talk:Mxt/User CSS for a monospaced coding font|the talk page]].


'''Horizontal style'''
{{syntaxhighlight|lang=css|1=
/* 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'''
{{syntaxhighlight|lang=css|1=
/* 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;
}
}}

{{anchor|Cleanup efforts}}'''Cleanup efforts'''

If you'd like to help clean up instances of the {{tag|{{!mxt|tt}}}} element – which has not been valid HTML since the 1990s, and should usually be replaced with {{tag|{{mxt|code}}}} (this may vary by context) – you can add something like the following to your {{samp|common.css}} to make {{tag|{{!mxt|tt}}|o}} stick out like a sore thumb:

{{syntaxhighlight|lang=css|1=
/* Flag bad code for cleanup */
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, and into [[Help:User style]], for consistency. It takes no parameters.

Typical usage:
<pre><nowiki>
== 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}}
</nowiki></pre>

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:Template documentation]]
}}</noinclude>