about:note formatting
Introduction
Danbooru's translation note system allows users to include HTML markup alongside note text. It uses restricted HTML formatting in contrast to most of Danbooru, which uses DText formatting.
Basic markup
This section describes the most common and easy to use tags.
<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.- To display an actual "<" or ">" character, use the following:
<
- "<", i.e. less than.>
- ">", i.e. greater than.<tn>
- A Danbooru-specific tag for translator's notes, i.e. clarifying remarks on the actual translation. It adds a line break and makes enclosed text small and 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.
Intermediate markup
This section deals with more complex markup, allowing to include hyper-links, align text, and separate text.
Attributes
HTML tags can be assigned attributes to achieve various effects. Attributes always take the format of attribute="attribute text"
.
<div something="foobar"></div>
Hyper-links
These use the <a>
tag. They can be used to link to any internal/external webpages.
FONT tag
This is the <font>
tag. DO NOT USE THIS TAG! It has been deprecated in HTML5, and will cause all stylings set with it to no longer function when Danbooru converts to using it.
SPAN tag
This is the <span>
tag. It is a basic inline tag.
DIV tag
This is the <div>
tag. It is a basic block tag.
P tag
This is the <p>
tag. It is a basic block tag.
TN tag
This is the <tn>
tag. It is used to specifiy text for translation notes.
Align attribute
The align
attribute allows one to specify the text alignment of the encapsulated text.
Advanced markup
The following section deals with even more complex markup, which can be used to further style the text in the notes.
Class attribute
This attribute can be used to add preprogrammed styles to a note.
Style attribute
This attribute is how most stylings should be applied to notes.
Color property
The color
property specifies the color of the text.
Font size property
The font-size
property specifies the size of the text.
Background color property
The background-color
property specifies the color of the area contained by the element and its padding.
Text align
The text-align
property specifies the alignment in the encapsulated text.
Padding
The padding
property specifies the area between the element and the border if there is one.
Margin
The margin
property specifies the area between the border (if there is one) and the surrounding elements.
Text-shadow
The text-shadow
property allows one to add shadows to an element's text.
Transform
The transform
property allows one to change the size and orientation of an element.
Position
Precise positioning of text can be achieved by using the position
property.
Title attribute
The title
attribute can be used to add popup text to any element, which will appear when the user hovers over it with the pointer.
RUBY tag
This is the <ruby>
tag. It is an inline tag, and allows one to place smaller pronounciation/explanatory text over other text, much like how Furigana can go over Kanji.
Useful style combinations
Text outline
text-shadow: -1px -1px #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
Upside-down text
transform: rotate(180deg);
Mirrored text (Left-Right)
transform: scaleX(-1);
Mirrored text (Top-Bottom)
transform: scaleY(-1);
Other allowed tags
Note that any attributes for those tags but the style
and title
attributes will be filtered out.