about:note formatting
Danbooru's translation note system allows users to include HTML markup alongside note text. Used properly, this system allows translators to mimic the original artist's text formatting with high fidelity, heightening the reader's sense of immersion in the work. While using markup to precisely replicate every nuance of formatting isn't required, it is recommended that translators make an attempt to match formatting changes in the original with changes in the translation, especially in the case of artists such as karaagetarou whose prolific use of text formatting effects forms a significant part of their visual style.
Please bear in mind that notes use restricted HTML formatting in contrast to most of Danbooru, which uses DText formatting.
Below is a list of formatting tags to keep in mind when translating. These tags are listed roughly in order of importance, and are listed as opening tags only. (All HTML markup must have both an opening and a closing tag; for instance, to markup a sentence with bold, it must begin with the <b> tag and end with the </b> tag.) Tags may be combined, but must be enclosed properly; that is, if "tag 1" was opened before "tag 2", then "tag 1" must be closed after "tag 2".
Wrong: <b><i>Text</b></i>
Correct: <b><i>Text</i></b>
Basic markup
This section describes the most common and easy to use tags. If you remember no other markup tags, remember these; they will usually be sufficient for whatever you're trying to do.
- <tn> is a Danbooru-specific tag for translator's notes; that is, clarifying remarks on the actual translation. It adds a line break and makes enclosed text small and gray. (It has mostly the same effect as <br><small><font color=gray>.) For purposes of consistency, all translator's notes should use this tag, and do not need to be indicated with 'TL:', 'N.B.', or any other such identifier.
- The <tn> tag should not be used for other purposes, such as sound effects - consider using italics for that.
- <b> bolds text. (Example)
- <i> italicizes text. (Example)
- <s> strikes out text. (
Example) - <u> underlines text. (Example)
- <big> increases the font size of text.
- <small> decreases the font size of text.
- In order to display a < in notes without it being interpreted as an HTML tag, you should type < instead.
Intermediate markup
This section deals with more complex markup, allowing to include hyper-links, apply colors and more sizing options to text.
The following tags use attributes to accept various parameters. The general attribute syntax looks like this: <tag attr1="value1" attr2="value2">Contents</tag>
.
- <a href="URL">link text here</a> makes a link to URL. This feature is best used in conjunction with (or in place of) translator's notes to avoid undue clutter, e.g. to link to an external page that explains a Japanese meme. When linking to a Danbooru page, it's recommended to use an internal link. For example, use
/posts/1
instead ofhttp://danbooru.me/posts/1
.
- <font color="COLOR"> colors text. COLOR can be either a color name or a hexadecimal RGB value of the form #RRGGBB.
- <font size="SIZE"> resizes text. SIZE can be a number from 1 to 7, representing font sizes from smaller to bigger; the default is 3. SIZE can also be a positive or negative number relative to 3; e.g. size="+2" is the same as size="5".
Multiple attributes can be used in one tag. For example, <font color="red" size="+2">text</font>
.
Resizing and coloring options should be used with utmost caution, as they can severely impact the readability of the note. Using the same color as the underlying text for the note is not always a good idea; orange, white, pink or yellow-colored text would be impossible to read at yellowish note box background; in such cases the color should be darkened or not used at all. Font sizes larger than 4 should be used only in the rare cases when original text has considerable impact, like very large SFX.
Examples
- <a href="http://www.google.com">External page</a> will result in: External page.
- <a href="/posts/1">Internal page</a> will result in: Internal page.
- <font size="4">Text</font> will make the text bigger (slightly larger than <big>).
- <font size="-1">Text</font> will make the text smaller (slightly larger than <small>).
- <font color="red">Text</font> will make the text red.
- <font color="#00FF00" size="7">Text</font> will make the text very large and green.
Advanced markup
The following section deals with even more complex markup, which can be used to further style the text in the notes.
- Advanced users can use the <span> tag instead of <font>, which is considered deprecated by HTML standards. <span style="STYLE"> can be used to apply various CSS styles to text ( see also the full reference ). Keep in mind that CSS3 styles are still not fully supported by the browsers and generally should not be used. Using the style attribute inside a <font> tag is not reccomended.
- The <p> tag can be used to enclose the text in a block and then apply styles to it. It can be used, for example, to create a note box with a solid background and centered text.
Useful CSS style properties to remember:
- color sets the text color in X11 or hexadecimal RGB format.
- background-color sets the background color in X11 or hexadecimal RGB format. Note that using that style with <span> will leave uncolored areas between lines of text.
- font and its substyles (most often used: font-color, font-size) sets the various properties of the font, including text size, font family,
- text-align sets the alignment of text. Only works for <p> blocks.
- padding sets the padding around the element.
- text-shadow while supported, it only rarely looks good, so it's best to use sparingly.
Rotating and mirroring text - This is very messy to make it work in all browsers (firefox/chrome/opera) as there is no standard to do this, so here is a template you can copy/paste.
Note that this makes the text very hard to read, use with caution.
- Rotating: <p style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">This is upside-down</p>
- Mirroring: <p style="-webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1);">This is mirrored</p>
Examples:
- <div style="color:white; background-color: black; font-size: 150%; padding: 5px;">Text</div>Note: Results in a note box containing a white text 1,5 times the normal size inside the solid black box with 5 pixels padding on every side, and a translation note below that box.
Other allowed tags
Danbooru note system also allows using other HTML tags. Note that any attributes for those tags will be filtered out.
Block tags:
- code - creates a block of text using monospace font
- center - creates a centered block of text
- blockquote - creates block of text styled as a quote
- pre - creates a block of text inside which any HTML markup is not processed and left as-is.
Header tags:
- h1, h2, h3, h4, h5, h6
List tags:
- ul
- li
- ol
Misc:
- em - similar to <i>
- strong - similar to <b>