Miyuu's Image Board

Table of Contents

* 1. "Introduction":#dtext-intro
* 2. "Basic markup":#dtext-basic
* 3. "Intermediate markup":#dtext-intermediate
* 4. "Advanced markup":#dtext-advanced
* 5. "Useful style combinations":#dtext-useful
* 6. "Other allowed tags":#dtext-other-tag
* 7. "Other allowed style properties":#dtext-other-style

h4#intro.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.

h4#basic.Basic markup

This section describes the most common and easy to use tags.

*

- Bolds text (example).

*
- Italicizes text (example).

*
- Strikes out text (~~Example~~).

*
- Underlines text (Example).

*
- Increases the font size of text.

*
- Decreases the font size of text.

* To display an actual "<" or ">" character, use the following:

**
<
- "<", i.e. less than.

**
>
- ">", i.e. greater than.

*
- 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
tag should not be used for other purposes, such as sound effects - consider using italics for that.

h4#intermediate. Intermediate markup

This section deals with more complex markup, allowing to include hyper-links, align text, and separate text.

h5#attributes. Attributes

HTML tags can be assigned attributes to achieve various effects. Attributes always take the format of
attribute="attribute text"
.

h5. Hyper-links

These use the
tag. They can be used to link to any internal/external webpages.

Details
The link is assigned using the [code]href
attribute, and the link text goes inbetween the enclosing
tags.

Example:

Link text

Pages that are internal to Danbooru can use relative links, i.e. the URL without the domain attached.

Example:

Link to post #1234

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:

Link to the artist commentary

h5. FONT tag

This is the
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. See About:Note Fonts for information on changing the font instead.

h5. SPAN tag

This is the
tag. It is a basic inline tag.

Details
Use it to encapsulate text that should go on the same line as text before and/or after it.

Example:

This is some basic inline text.

h5. DIV tag

This is the
tag. It is a basic block tag.

Details
Use it to encapsulate text that are on separate lines.

Example:

Block line 1 Block line 2

Both of the above will go on separate lines.

h5. P tag

This is the
tag. It is a basic block tag.

Details
It has a few key differences from the
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
or another
.

h5#tn-tag. TN tag

This is the
tag. It is used to specifiy text for translation notes.

Details
As "mentioned above":[#dtext-basic], its use is internal to Danbooru only.

Under the covers, it is in actuality the
tag. So the following:

Translation text.

...becomes the following:

Translation text.

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:

[Background text]

h6#align. Align attribute

The
align
attribute allows one to specify the text alignment of the encapsulated text.

Details
*
center
- Center aligned text.
*
left
- Left aligned text.
*
right
- Right aligned text.
*
justify
- Text is spaced to fill the entire block.

Text that is center aligned.

Note: Only the
and
tags accept the
align
attribute.

h4#advanced. Advanced markup

The following section deals with even more complex markup, which can be used to further style the text in the notes.

h5. Class attribute

This attribute can be used to add preprogrammed styles to a note.

Details
One example was shown above with "translator notes":[#dtext-tn-tag]. Multiple classes can be used with this attribute. Each class must be separated by a space.

Translator text with a margin bottom of 16px.

Other available classes can be found looking through Danbooru's style sheets.

h5. Style attribute

This attribute is how most stylings should be applied to notes.

Details
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:

Text that is 18 pixels and red.

h6#color. Color property

The
color
property specifies the color of the text.

Details
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.

* The codes
#000fdbA1
,
rgba(0, 15, 219, 0.63/63%)
and
hsla(236, 100%, 43%, 0.63/63%)
all correspond to the same color with 63% transparency level.

Example:

Text that is red.

h6#font-size. Font size property

The
font-size
property specifies the size of the text.

Details
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

Text that is 18 pixels.

Tip: Use relative sizes whenever possible. Doing so makes notes more likely to display correctly when viewed on differently sized displays.

h6#background-color. Background color property

The
background-color
property specifies the color of the area contained by the element and its padding.

Details
It takes the same values as the "color property":[#dtext-color]. The amount of area filled depends on the "size":[#dtext-size] and "padding":[#dtext-padding] of the HTML element, as well as whether the HTML element is an inline or block tag.

Background color is yellow.

h6#background. Background

The
background
property is the shorthand property that also allow you repeating patterns and gradient backgrounds.

Details
For gradient backgrounds, it works like
background-image
from CSS (it doesn't work if you change it to
background-image
).

That text has a left to right red-blue gradient background.

h6#text-align. Text align

The
text-align
property specifies the alignment in the encapsulated text.

Details
It takes the same values as the "align attribute":[#dtext-align].

Text that is center aligned.

h6#padding. Padding

The
padding
property specifies the area between the element and the border if there is one.

Details
can take the same values as the "font-size property":[#dtext-font-size]. 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
.

h6#margin. Margin

The
margin
property specifies the area between the border (if there is one) and the surrounding elements.

Details
It follows the same values and format as the "padding property":[#dtext-padding]. 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
.

h6#text-shadow. Text-shadow

The
text-shadow
property allows one to add shadows to an element's text.

Details
It uses values from both the "color property":[#dtext-color] and the "font-size property":[#dtext-font-size]. 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
.

Example:

Text with 2 shadows with different colors, position, and bluriness.

h6#white-space. White-space

The
white-space
property allows one to control how whitespace and text wrapping are handled.

Details
This property controls whether two different kinds of character substitutions are made:
* If multiple whitespace characters appear consecutively, they can be replaced with a single character, causing sequences of spaces to be replaced with a single space. This also removes leading or trailing whitespace from a line.
* If a line of text is determined to be too long to fit inside the note's current width, automatic text wrapping can be performed by replacing a whitespace character with a line break.

The possible values of this property are as follows:

*
normal
- Collapse sequences of whitespace and wrap text when necessary. This is the default

*
nowrap
- Collapse sequences of whitespace, wrap text only at line breaks.

*
pre
- Whitespace is preserved, wrap text only at line breaks.

*
pre-line
- Same as
normal
(?)

*
pre-wrap
- Whitespace is preserved, wrap text when necessary.

When using
nowrap
or
pre
, the note box will resize to fit the longer line.

When suppressing text wrapping, keep in mind your notes should be accessible to users on all platforms. Mobile users have dramatically less screen width than PC users, and notes that are too wide may go off both sides of the screen.

As an alternative to this property, you might consider using a non-breaking space by entering

. As its name implies, a non-breaking space prevents text wrapping from occurring where it is used, forcing the words before and after it to be on the same line. It otherwise is visually identical to an ordinary space.

Examples:

This is a really long line of text which doesn't contain any line breaks. When used in a note, the nowrap value prevents it from wrapping to a new line no matter what, even if the note ends up going off the screen.

▲ ▲ ▲ ▲ ▲ ▲

h6#transform. Transform

The
transform
property allows one to change the size and orientation of an element.

Details
It can use the following functions.

* Size parameter transforms

** These transforms use the "font-size":[#dtext-font-size] values.

**
translate(x, y)
- Translates (moves) the element.

***
translateX
and
translateY
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
and
scaleY
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
and
skewY
functions are also available which only affects the specified axis.

Multiple transforms are stackable by separating each transform by a space.

Examples:

Scales the X axis by 2, moves it to the right by 2em, and rotates it 30 degrees.

h5. Position

Precise positioning of text can be achieved by using the
position
property.

Details
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.

Chirp Chirp Chirp Chirp

Note: Since the sub-elements are using absolute positions, the whitespace between the sub-elements no longer matters.

h5. 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.

Example
The main text.

h5. RUBY tag

This is the
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.

Details
It works in concert with the
and
tags.

Inside the
element goes pairs of
and
elements. The
specifies the bottom text, and the
specifies the top text. Order matters, and so the
element must always go before the
element.

Example:

誕tan生jou日bi

h4#useful. Useful style combinations

h5. Text outline

text-shadow: -1px -1px #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

h5. Upside-down text

transform: rotate(180deg);

h5. Mirrored text (Left-Right)

transform: scaleX(-1);

h5. Mirrored text (Top-Bottom)

transform: scaleY(-1);

h4#other-tag. Other allowed tags

Note that any attributes for those tags but the
style
and
title
attributes will be filtered out.

Expand
h5. Block tags

*
- creates a block of text using monospace font * - creates a centered block of text * - creates block of text styled as a quote * - creates a block of text inside which any HTML markup is not processed and left as-is. h5. Header tags * , , , , , h5. List tags * * * h5. Misc * - Same as . * - Same as .
h4#other-style. Other allowed style properties Expand* align-items * background-clip, -webkit-background-clip * 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-radius, 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 * -webkit-text-fill-color * -webkit-text-stroke, -webkit-text-stroke-color, -webkit-text-stroke-width * white-space * word-break * word-spacing * word-wrap, overflow-wrap * writing-mode * vertical-align h4#examples. Example posts * post #4876363 * post #3323250 * post #3332461 * post #4954692 h4#see-also. See also * About:Note fonts * About:Embedded notes * "TranslatorAssist userscript": h4#external-links. External links * https://www.w3schools.com/cssref/ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

about:note_formatting