User:CallerNo6/Web Service/testing: Difference between revisions

From MusicBrainz Wiki
Jump to navigationJump to search
No edit summary
(→‎Code: adding mention of <kbd> tag)
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==WTF?==
This is a page for trying out typographic conventions.

==Links==
==Links==


Line 4: Line 7:
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''<entity>''' (bold)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''<entity>''' (bold)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''''<entity>''''' (bold italic)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''''<entity>''''' (bold italic)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki><span style="font-family:monospace"><entity></span> (css font-family:monospace , fixed width, note it's smaller)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki><tt><entity></tt> (tt, should be fixed width)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki><tt><entity></tt> (tt, should be fixed width)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki><tt style="font-weight:600"><entity></tt> (tt, should be fixed width slightly bolder)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>''<tt><entity></tt>'' (fixed width italic)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''<tt><entity></tt>''' (tt bold)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''<tt><entity></tt>''' (fixed width bold)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>''<tt><entity></tt>'' (tt italic)
*<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''''<tt><entity></tt>''''' (fixed width bold italic)
*''<nowiki>http://musicbrainz.org/ws/2/</nowiki><tt><entity></tt>'' (fixed width w/ all italic, which is what the O'Reilly guide suggests but I don't think the replaceable text stands out enough this way)

*''<nowiki>http://musicbrainz.org/ws/2/</nowiki>'''<tt><entity></tt>''''' (fixed width bold w/ all italic)




Line 22: Line 25:
*<tt>O</tt><span style="font-family:monospace; font-size:1em">O</span><tt>O</tt><span style="font-family:workaround, monospace">O</span><tt>O</tt><span style="font-family:monospace">O</span>
*<tt>O</tt><span style="font-family:monospace; font-size:1em">O</span><tt>O</tt><span style="font-family:workaround, monospace">O</span><tt>O</tt><span style="font-family:monospace">O</span>


So, note. font-size:monospace will default (for most sytems) to smaller-than-body-text unless you put in a dummy font-family first. So:
So, note. Monospace will default (for most sytems) to smaller-than-body-text unless you put in a dummy font-family first. So:
<code><pre><span style="font-family:mono-workaround, monospace;">Foo</span></pre></code>
<code><pre><span style="font-family:mono-workaround, monospace;">Foo</span></pre></code>


==WTF?==
==Code==
<code>html code block</code>
This is a page for trying out typographic conventions.


Oh! I just learned about the <code>kbd</code> tag (for 'user input') which looks like <kbd>this</kbd>. Should be monospaced, probably has the same font-size problems mentioned above|below|whatever.

I don't like the gray. It's too dark, at least on my system.
===Other Colors===
====div====
<div style="background-color:gray">This is gray</div>
<div style="background-color:gray; color:white">This is gray too</div>
<div style="background-color:lightgray">This is light gray</div>
<code> for comparison, this is the standard code block again</code>
<div style="background-color:silver">This is silver</div>
<div style="background-color:gainsboro">This is gainsboro</div>
<div style="background-color:ghostwhite">This is ghostwhite</div>
<div style="background-color:whitesmoke">This is whitesmoke</div>
<div style="border:1px solid purple; display:inline-block"><tt>purple border, display:inline-block</tt></div>

====inline====
This is an <span style="background-color:lightgray">inline lightgray</span> box.<br />
This is an <span style="background-color:gainsboro">inline gainsboro</span> box.<br />
This is an <span style="background-color:whitesmoke">inline whitesmoke</span> box.<br />
This is an <span style="background-color:ghostwhite">inline ghostwhite</span> box.<br />
This is an <span style="background-color:ghostwhite; border:1px solid lightgray">inline ghostwhite w/ lightgray border</span> box.# border too dark<br />
This is an <span style="background-color:whitesmoke; box-shadow:1px 1px 2px #ccc;">inline whitesmoke with box shadow</span> box.# silly<br />


<pre><code>from markdown import code_block_style</code></pre>

markdown uses <nowiki><pre><code></nowiki> to format code blocks

==The O'Reilly way==
{| border="1"
{| border="1"
|+ from [http://chimera.labs.oreilly.com/books/1230000000969/ch03.html O'Reilly]
|+ from [http://chimera.labs.oreilly.com/books/1230000000969/ch03.html O'Reilly]
|-
| Filenames, file extensions (such as .jpeg), directory paths, commands in Unix, Oracle, SQL, and Linux books || ''Body font italic''
|-
| URLs, URIs, email addresses || ''Body font italic''
|-
| Emphasized words (shouting!) || ''Body font italic''
|-
|First instance of a technical term || ''Body font italic''
|-
|-
| Code blocks || <tt>Constant width</tt>
| Code blocks || <tt>Constant width</tt>
Line 38: Line 77:
| Language and script elements: class names, types, namespaces, attributes, methods, variables, keywords, functions, modules, commands, properties, parameters, values, objects, events, XML and HTML tags, and similar elements. Some examples include: System.Web.UI, a while loop, the Socket class, and the Obsolete attribute. Exception: commands in Unix, Oracle, SQL, and Linux book, which are regular italics. || <tt>Constant width</tt>
| Language and script elements: class names, types, namespaces, attributes, methods, variables, keywords, functions, modules, commands, properties, parameters, values, objects, events, XML and HTML tags, and similar elements. Some examples include: System.Web.UI, a while loop, the Socket class, and the Obsolete attribute. Exception: commands in Unix, Oracle, SQL, and Linux book, which are regular italics. || <tt>Constant width</tt>
|-
|-
| Replaceable items (placeholder items in syntax); “username” in the following example is a placeholder: login: username || ''<tt>Constant width italic</tt>''
| Replaceable items (placeholder items in syntax); “username” in the following example is a placeholder: "login: ''<tt>username</tt>''" || ''<tt>Constant width italic</tt>''
|-
|-
| Commands or text to be typed by the user || '''<tt>Constant width bold</tt>'''
| Commands or text to be typed by the user || '''<tt>Constant width bold</tt>'''
|-
|-
| Line annotations || <em style="font-size:smaller">Body font italic (but smaller)</em>
| Line annotations || <em style="font-size:smaller">Body font italic</em> (but smaller)
|-
|-
| Placeholders in paths, directories, GUI items, URLs, or other text that would be italic anyway || <nowiki>http://</nowiki>www.<yourname>.com
| Placeholders in paths, directories, GUI items, URLs, or other text that would be italic anyway || ''<nowiki>http://</nowiki>www.<tt><yourname></tt>.com''
|-
|-
| Keyboard accelerators (Ctrl, Shift, etc.), menu titles, menu options, menu buttons || Body text
| Keyboard accelerators (Ctrl, Shift, etc.), menu titles, menu options, menu buttons || Body text

Latest revision as of 14:58, 14 June 2016

WTF?

This is a page for trying out typographic conventions.

Links

  • http://musicbrainz.org/ws/2/<entity> (italic)
  • http://musicbrainz.org/ws/2/<entity> (bold)
  • http://musicbrainz.org/ws/2/<entity> (bold italic)
  • http://musicbrainz.org/ws/2/<entity> (tt, should be fixed width)
  • http://musicbrainz.org/ws/2/<entity> (fixed width italic)
  • http://musicbrainz.org/ws/2/<entity> (fixed width bold)
  • http://musicbrainz.org/ws/2/<entity> (fixed width bold italic)
  • http://musicbrainz.org/ws/2/<entity> (fixed width w/ all italic, which is what the O'Reilly guide suggests but I don't think the replaceable text stands out enough this way)
  • http://musicbrainz.org/ws/2/<entity> (fixed width bold w/ all italic)


Entities in sentences?

  • An artist is not an artist. (tt)
  • An artist in not an artist. (tt italic)
  • an artist is not an artist (css font-family:monospace , should be fixed width but note it's smaller)

Monospace tests

  • OOOOOO

So, note. Monospace will default (for most sytems) to smaller-than-body-text unless you put in a dummy font-family first. So:

<span style="font-family:mono-workaround, monospace;">Foo</span>

Code

html code block

Oh! I just learned about the kbd tag (for 'user input') which looks like this. Should be monospaced, probably has the same font-size problems mentioned above|below|whatever.

I don't like the gray. It's too dark, at least on my system.

Other Colors

div

This is gray
This is gray too
This is light gray

for comparison, this is the standard code block again

This is silver
This is gainsboro
This is ghostwhite
This is whitesmoke
purple border, display:inline-block

inline

This is an inline lightgray box.
This is an inline gainsboro box.
This is an inline whitesmoke box.
This is an inline ghostwhite box.
This is an inline ghostwhite w/ lightgray border box.# border too dark
This is an inline whitesmoke with box shadow box.# silly


<code>from markdown import code_block_style</code>

markdown uses <pre><code> to format code blocks

The O'Reilly way

from O'Reilly
Filenames, file extensions (such as .jpeg), directory paths, commands in Unix, Oracle, SQL, and Linux books Body font italic
URLs, URIs, email addresses Body font italic
Emphasized words (shouting!) Body font italic
First instance of a technical term Body font italic
Code blocks Constant width
Registry keys Constant width
Language and script elements: class names, types, namespaces, attributes, methods, variables, keywords, functions, modules, commands, properties, parameters, values, objects, events, XML and HTML tags, and similar elements. Some examples include: System.Web.UI, a while loop, the Socket class, and the Obsolete attribute. Exception: commands in Unix, Oracle, SQL, and Linux book, which are regular italics. Constant width
Replaceable items (placeholder items in syntax); “username” in the following example is a placeholder: "login: username" Constant width italic
Commands or text to be typed by the user Constant width bold
Line annotations Body font italic (but smaller)
Placeholders in paths, directories, GUI items, URLs, or other text that would be italic anyway http://www.<yourname>.com
Keyboard accelerators (Ctrl, Shift, etc.), menu titles, menu options, menu buttons Body text