about:note formatting

• 1. Introduction
• 2. Basic markup
• 3. Intermediate markup
• 4. Advanced markup
• 5. Useful style combinations
• 6. Other allowed tags
• 7. Other allowed style properties

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>

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.

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.

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

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>

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

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.

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>

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:

<span style="color: red;">Text that is red.</span>

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>

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

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>

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

<div style="background: linear-gradient(90deg, red, blue);">That text has a left to right red-blue gradient background.</div>

It takes the same values as the align attribute.

<div style="text-align: center;">Text that is center aligned.</div>

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

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

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.

Example:

<div style="text-shadow: 5px 5px 5px, -5px -5px red;">Text with 2 shadows with different colors, position, and bluriness.</div>

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:

<div style="white-space: nowrap">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.</div>

<div style="white-space: normal">  ▲
▲ ▲</div>
<div style="white-space: pre">  ▲
▲ ▲</div>

It can use the following functions.

• Size parameter transforms
• These transforms use the 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:

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

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.

<div title="This is some popup text.">The main text.</div>

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>

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

• 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