help:notes
Notes are the floating text boxes you sometimes see above images. Notes are used to translate images, and also sometimes to provide general annotations.
This page is about how to create and format notes. See howto:translate for guidelines about translating posts.
Adding notes
To add a note, click the Add note link in the sidebar, or press the N key on your keyboard. Click and drag on the image to create an empty note.
You can drag the note to reposition it, or drag the corners to resize it. You can also click on a note and use the arrow keys on the keyboard to move it, or use shift+arrows to resize it.
After moving a note, be sure to click the text box beneath it and click Save to save the note's new position.
Editing notes
To edit a note, mouse over the note and click on the text box that appears beneath it. An edit dialog will appear. This dialog will contain five buttons:
- Save - Save the note. Changes won't be saved until you click save.
- Preview - Preview what the note will look like.
- Cancel - Discard changes. The note's position, dimensions, and text will all be restored.
- Delete - Remove the note.
- History - Show the edit history of the note.
You can copy all notes to another post via the Copy notes link in the sidebar. This link only appears beside posts which currently have notes.
Embedded notes
Embedded notes contain the text inside the note box, instead of showing the text in a separate popup. This allows the notes to look like a seamless part of the image.
To make embedded notes, click the Edit link beneath the post and check the Embed notes option, then save the changes.
Formatting
Notes can be formatted using HTML and CSS. Danbooru allows a limited set of HTML and CSS, described below.
See about:note formatting for more details on advanced note formatting.
Basic formatting
| HTML | Description |
|---|---|
<b>bold</b> | Bold text |
<i>italics</i> | Italic text |
<s>strikethrough</s> | |
<u>underline</u> | Underlined text |
<big>text</big> | Large text |
<small>text</small> | Small text |
<code>text</ code> | Monospace text |
<h1>text</h1> | Heading. |
<tn>note</tn> | Translation note. Don't use for sound effects or other purposes. |
<span style="font-family: serif">text</span> | Set font (see fonts below). |
<span style="font-size: 200%">text</span> | Set text size. |
<span style="color: red;">text</span> | Colored text. |
<span style="color: #FF0000;">text</span> | Colored text (RGB value). |
<a href="https://www.google.com">Google</a> | Google. |
<a href="/posts/1234">post #1234</a> | post #1234. |
< | A "<" sign. |
> | A ">" sign. |
Advanced formatting
| HTML | Description |
|---|---|
<div style="text-align: center">text</div> | Center-aligned text. |
<div style="text-align: right">text</div> | Right-aligned text. |
<div style="text-align: justify">text</div> | Justified text. |
<div style="padding: 1em">text</div> | Padded text (empty borders around text). |
<div style="white-space: nowrap">text</div> | No word wrapping (force text to stay on one line). |
<span style="transform: rotate(180deg);">text</span> | Upside-down text. |
<span style="transform: scaleX(-1);">text</span> | Mirrored text (left-right). |
<span style="transform: scaleY(-1);">text</span> | Mirrored text (top-bottom). |
<span style="-webkit-text-stroke: 1px black">text</span> | Outlined text. |
<ruby><rb>明日</rb><rt>Ashita</rt></ruby> | Ruby text (used for furigana). |
<ul><li>One</li><li>Two</li></ul> | Bulleted list. |
<ol><li>One</li><li>Two</li></ol> | Numbered list. |
Fonts
| Font | Description |
|---|---|
| comic | Comic Relief, a Comic Sans replacement. |
| narrow | Archivo Narrow, an Arial Narrow replacement. Narrow and thin. |
| mono | IBM Plex Mono, a monospace font for use on code or robot-like text. |
| slab sans | Anton, an Impact replacement. Narrow and thick. |
| slab serif | Rokkitt, a Rockwell replacement. A blocky serif font. Sometimes used for comic titles. |
| formal serif | Lora, a rounded, more formal serif font. |
| formal cursive | Petit Formal Script, a fancy cursive font. |
| Kalam, a neat handwritten font. Comparable to MV Boli. Suitable for neat handwriting or comics. | |
| hand | Indie Flower, a casual handwritten font. Comparable to Segoe Print. |
| childlike | Giselle Script, a childlike handwritten font. |
| blackletter | Manufacturing Consent, a Gothic / Germanic / Old English style font. |
| scary | Anarchy, with jagged wild strokes. |
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
Examples
Open these posts to see examples of advanced note formatting.
Fonts
