Edit
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.
The link is assigned using the href
attribute, and the link text goes inbetween the enclosing <a>
tags.
Example:
<a href="https://www.example.com">Link text</a>
Pages that are internal to Danbooru can use relative links, i.e. the URL without the domain attached.
Example:
<a href="/posts/1234">Link to post #1234</a>
Elements on the same page can be linked to using anchor links, which are hashtags "#" followed by the ID of the element being linked to.
Example:
<a href="#artist-comment">Link to the artist commentary</a>
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.
Use it to encapsulate text that should go on the same line as text before and/or after it.
Example:
This is <span>some basic</span> inline text.
DIV tag
This is the <div>
tag. It is a basic block tag.
Use it to encapsulate text that are on separate lines.
Example:
<div>Block line 1</div><div>Block line 2</div>
Both of the above will go on separate lines.
P tag
This is the <p>
tag. It is a basic block tag.
It has a few key differences from the <div>
tag.
- 1. It adds an extra line-break if it is not the last HTML tag in note.
- 2. It cannot be used to encapsulate other block tags like
<div>
or another<p>
.
TN tag
This is the <tn>
tag. It is used to specifiy text for translation notes.
As mentioned above, its use is internal to Danbooru only.
Under the covers, it is in actuality the <p>
tag. So the following:
<tn>Translation text.</tn>
...becomes the following:
<p class="tn">Translation text.</p>
As shown above, the size and color the the translator text is added by using the class
attribute set with the value "tn". The same can be done with any other HTML tag. This is useful if one doesn't want to have a line-break added, like a translation note at the top of the HTML.
Example:
<div class="tn">[Background text]</div>
Align attribute
The align
attribute allows one to specify the text alignment of the encapsulated text.
center
- Center aligned text.left
- Left aligned text.right
- Right aligned text.justify
- Text is spaced to fill the entire block.
<div align="center">Text that is center aligned.</div>
Note: Only the <div>
and <p>
tags accept the align
attribute.
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.
One example was shown above with translator notes. Multiple classes can be used with this attribute. Each class must be separated by a space.
<span class="tn mb-4">Translator text with a margin bottom of 16px.</span>
Other available classes can be found looking through Danbooru's style sheets.
Style attribute
This attribute is how most stylings should be applied to notes.
This attribute can have one or more CSS properties added. Each property ends with a colon ":" with the value of that property ending in a semi-colon ";" .
Example:
<span style="font-size: 18px; color: red;">Text that is 18 pixels and red.</span>
Color property
The color
property specifies the color of the text.
It takes the following values.
- Color name, e.g.
red
. - RGB hexadecimal value, e.g.
#444
or#123456
. - 3-digit hex codes mirror the first digit onto the second, e.g. #123 is actually #112233.
- RGB function, e.g.
rgb(255, 42, 22)
- Values are decimal format.
- HSL function, e.g.
hsl(120, 100%, 50%)
- Hue is 0 to 360, saturation and lightness are 0 to 100%
Alpha transparency can also be added by adding an extra 2 digits to the hex format or using the RGBA/HSLA functions. The values are 00-FF for hex, and 0.0 to 1.0 for RGBA/HSLA.
Example:
<span style="color: red;">Text that is red.</span>
Font size property
The font-size
property specifies the size of the text.
It takes the following values.
- Absolute size
- Zero, e.g.
0
- Pixels, e.g.
18px
. - Centimeters, e.g.
0.5cm
- Millimeters, e.g.
50mm
- Inches, e.g.
0.25in
- Names, e.g.
large
. - Available names: xx-small, x-small, small, medium, large, x-large, xx-large
- Relative sizes
- Percentage, e.g.
%100
. - Relative the the parent element's
font-size
. - EM (element multiply), e.g.
3em
. - Relative the the parent element's
font-size
, so 3em is 3x the parent's font-size. - REM (root element multiply), e.g.
3rem
. - Relative the the root element's
font-size
(usually 16px), so 3em is 3 x 16px or 48px. - Names, e.g.
larger
. - Available names: smaller, larger
<span style="font-size: 18px;">Text that is 18 pixels.</span>
Background color property
The background-color
property specifies the color of the area contained by the element and its padding.
It takes the same values as the color property. The amount of area filled depends on the size and padding of the HTML element, as well as whether the HTML element is an inline or block tag.
<span style="background-color: yellow;">Background color is yellow.</span>
Text align
The text-align
property specifies the alignment in the encapsulated text.
It takes the same values as the align attribute.
<div style="text-align: center;">Text that is center aligned.</div>
Padding
The padding
property specifies the area between the element and the border if there is one.
can take the same values as the font-size property. The EM and % values are relative to the element's font-size
. The number of values specified determines which sides get which value.
- 1 value, e.g.
padding: 18px
- All 4 sides get the value of 18px
- 2 values, e.g.
padding: 18px 0
- Top and bottom are 18px, left and right are 0
- 3 values, e.g.
padding: 18px 0 24px
- Top is 18px, left and right are 0, bottom is 24px
- 4 values, e.g.
padding: 18px 0 24px 5px
- Top is 18px, right is 0, bottom is 24px, left is 5px
Instead of using padding
, individual sides can be specified by using padding-top
, padding-bottom
, padding-left
, or padding-right
.
Note: Top and bottom padding do not work with inline elements such as <span>
.
Margin
The margin
property specifies the area between the border (if there is one) and the surrounding elements.
It follows the same values and format as the padding property. Unlike with padding, margin values can be negative, e.g. "-24px". This effectively pulls it closer to other elements, to the point where it can overlap.
Note: Top and bottom margins do not work with inline elements such as <span>
.
Text-shadow
The text-shadow
property allows one to add shadows to an element's text.
It uses values from both the color property and the font-size property. It specifies the position, bluriness, and color of text which will shadow the encapsulating text. Multiple shadows can be specified by separating each value by a comma ",".
- Format:
x-position y-position blur-radius color
- x-position (required, size parameter)
- y-position (required, size parameter)
- blur-radius (optional, size parameter)
- Defaults to 0 when not specified.
- color (optiona, color parameter)
- Defaults to the element's color when not specified.
If only the blur-radius
or color
is specified, it will interpret the value based upon whether it is a size or color value. If it is a size value, it will be the blur-radius, if it is a color value, it will be the color[/color].
[b]Example:[/b]
[code]
<div style="text-shadow: 5px 5px 5px, -5px -5px red;">Text with 2 shadows with different colors, position, and bluriness.</div>
Transform
The transform
property allows one to change the size and orientation of an element.
It can use the following functions.
- Size parameter transforms
- These transforms use the font-size values.
translate(x, y)
- Translates (moves) the element.translateX
andtranslateY
functions are also available which only affects the specified axis.scale(x, y)
- Scales (resizes) the element. Uses scalar values, e.g. "3.0" is 3 times the current size.scaleX
andscaleY
functions are also available which only affects the specified axis.- Angle parameter transforms
- These transforms use "deg" for degrees, "rad" for radians, and "turn" which is equivalent to 360 degrees.
- E.g. "30deg", "1.25rad", "0.5turn"
rotate(angle)
- Rotates the element.skew(x-angle, y-angle)
- Rotates the element.skewX
andskewY
functions are also available which only affects the specified axis.
Multiple transforms are stackable by separating each transform by a space.
Examples:
<div style="transform: scale(2, 1) translate(2em, 0) rotate(30deg);">Scales the X axis by 2, moves it to the right by 2em, and rotates it 30 degrees.</div>
Position
Precise positioning of text can be achieved by using the position
property.
First set the parent element with position:relative
, as well as setting the height and width. Then set the sub-elements with position:absolute
, then use left / right and top / bottom to place the sub-element text relative to the parent element.
<div style="position: relative; width: 6.5em; height: 2.5em;"> <div style="position: absolute; left: 4em; top: 0;">Chirp</div> <div style="position: absolute; left: 4em; top: 1em;">Chirp</div> <div style="position: absolute; left: 1.75em;; top: 0.25em;">Chirp</div> <div style="position: absolute; left: 0; top: 1em;">Chirp</div> </div>
Note: Since the sub-elements are using absolute positions, the whitespace between the sub-elements no longer matters.
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.
<div title="This is some popup text.">The main text.</div>
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.
It works in concert with the <rb>
and <rt>
tags.
Inside the <ruby>
element goes pairs of <rb>
and <rt>
elements. The <rb>
specifies the bottom text, and the <rt>
specifies the top text. Order matters, and so the <rb>
element must always go before the <rt>
element.
Example:
<ruby><rb>誕</rb><rt>tan</rt><rb>生</rb><rt>jou</rt><rb>日</rb><rt>bi</rt></ruby>
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.
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>
- Same as<i>
.<strong>
- Same as<b>
.
Other allowed style properties
- align-items
- background-color
- border, border-color, border-image, border-radius, border-style, border-width
- border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-style, border-bottom-width
- border-left, border-left-color, border-left-style, border-left-width
- border-right, border-right-color, border-right-style, border-right-width
- border-top, border-top-color, border-top-left-radious, border-top-right-radius, border-top-style, border-top-width
- bottom, left, right, top
- box-shadow
- display
- filter
- float
- font, font-family, font-size-adjust, font-style, font-variant, font-weight
- height, width
- justify-content
- letter-spacing
- line-height
- opacity
- perspective, perspective-origin
- text-align
- text-decoration
- text-indent
- text-shadow
- transform-origin
- white-space
- word-break
- word-spacing
- word-wrap, overflow-wrap
- writing-mode
- vertical-align
See also
External links
No posts found.