Edit
Table of Contents
Introduction
AIBooru's translation note system allows users to include HTML markup alongside note text. It uses restricted HTML formatting in contrast to most of AIBooru, 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>
- An AIBooru-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.
Details
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 AIBooru 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 AIBooru converts to using it. See About:Note Fonts for information on changing the font instead.
SPAN tag
This is the <span>
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 <span>some basic</span> inline text.
DIV tag
This is the <div>
tag. It is a basic block tag.
Details
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.
Details
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.
Details
As mentioned above, its use is internal to AIBooru 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.
Details
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.
Details
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 AIBooru's style sheets.
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:
<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.
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%)
andhsla(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>
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
<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.
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. 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>
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
).
<div style="background: linear-gradient(90deg, red, blue);">That text has a left to right red-blue gradient background.</div>
Text align
The text-align
property specifies the alignment in the encapsulated text.
Details
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.
Details
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.
Details
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.
Details
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>
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 defaultnowrap
- Collapse sequences of whitespace, wrap text only at line breaks.pre
- Whitespace is preserved, wrap text only at line breaks.pre-line
- Same asnormal
(?)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>
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 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.
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.
<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.
Example
<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.
Details
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.
Show
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
Show
- 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
See also
External links
No posts found.