dA Literature Tutorial: reading and submitting

Reading Literature on DeviantART

Each literature deviation is displayed within a box (there may also be a preview image displayed above it). The first line in this box is always the deviation title, as a first-level heading. The second line has the word "by" followed by the author's username (as a link). The rest of the deviation has been written by the author.

At the top, right-hand corner of a literature deviation, you may see five buttons, depending on the category. These buttons will be my main focus for this part of the tutorial.
(at the moment, I think the categories are a bit buggy - as of December 9, 2012, or possibly earlier, this seems to have been fixed. But sometimes the buttons won't load right and the page needs to be refreshed)

Adjusting the font size

The first button shows a picture of two letter A's, side-by-side. It's used to toggle the size of the font, between a medium size and a large size. Although most deviation text changes size when this button is pressed, some of the headings remain the same (including the h1 title). Author-defined text sizes also remain unchanged by this option.

It's probably less strenuous on the eyes to read larger sized text.

Adjusting the font face

The second literature deviation button shows a capital letter T. This button toggles the font face, between a serif and a sans serif font (although author-defined font faces remain unchanged). Serif fonts are the semi-fancy fonts like Times New Roman, while sans serif fonts, like Arial, are plain and have no tails or flags attached to the letters.

Sans serif fonts are usually considered easier to read online, while serif fonts are often seen on physical paper.

Indenting paragraphs

The third button, only shown for prose pieces, shows a paragraph symbol (it kind of looks like a backwards P). Clicking this button will either add indention to the deviation text, or remove it (basically, it adds tabs to the beginning of paragraphs).

This button doesn't always work properly, because it depends on how the deviation was submitted.

Changing the background color

The fourth literature deviation button shows a black square. This button toggles between a light and dark viewing of the deviation. Deviations are usually displayed within a light gray box, with dark gray or black writing. When switching to the dark viewing, the box around the deviation fills with a very dark gray color, and most text turns white or very light gray. Some heading levels may remain the same (colored dark gray, but lighter than the background).

A dark background supposedly puts less strain on the eyes when reading a lot of text.

Centering text

Since Oct 25, 2012, literature deviations have a fifth viewing option - a button that shows (c). This button will only work for literature deviations without any long lines. The author-written text will be pushed to the right in order to center it on the screen. It won't center-align the text, however, and works best for poetry. It most likely won't do a thing for prose.

Submitting Literature on DeviantART

The submission process

(Read here if you don't know how to submit artwork: FAQ #79)

On the submission page, there are the buttons "Upload File..." and "Add Text...". It's possible to upload .html and .txt files from your computer by clicking "Upload File...". These files will be treated the same as text entered with the "Add Text..." button.

If you click the "Add Text..." button, the dA text editor box will appear on the screen. Near the bottom, there's mention of what html tags can be used (I'll mention these tags in detail later). Below that, there's a "Show Preview" button. Clicking this button will allow you to preview your deviation, but the display buttons aren't available, so you can't see how it will look when paragraph indention is turned on, when dark view is turned on, or when the font options are changed.

After clicking the "OK" button at the bottom of the text editor, or after uploading an html or text file, you won't be able to edit your work again until after you've submitted the deviation. You can then edit the deviation and click on the "Edit Text" button. When doing so, the dA editor box will appear, even for the uploaded files.

Not all deviation categories support text submissions. Even though you can add text no matter what category you choose, when you try submitting the deviation, you'll get a warning if the category doesn't support text (it can be pretty annoying, but the best way I know of to find a good category is to just keep trying different ones).

Literature decorations

Adding a preview image

It's possible to submit an image, called a "preview image". This image will be displayed as the deviation thumbnail, and shown above the deviation on the deviation page.

When selecting text as your submission type, a "Preview" section appears in the submission form, where you can press a button to choose an image. A box then comes up with directions.

Preview images follow the same rules as image deviations, meaning that you need the proper permission in order to use someone else's work. FAQ #63

Adding a custom literature tag

Literature tags are displayed on the left side of literature thumbnails, for literature deviations that don't have preview images. The default literature tag has the word "literature" on a gray background, but you can upload a custom literature tag to use with your literature deviations.

All of your literature deviations will have the same literature tag, so I wouldn't recommend making a custom literature tag for a specific story (or else all your other literature deviations will be updated to have the same tag).

You can find out how to upload a custom literature tag here: FAQ #560

Using html tags within the deviation

Some html tags are available for use in literature submissions.

The dA text editor is not the same thing as an HTML editor. If you treat a literature deviation as a webpage, your deviation will be nothing but a bunch of html code. Even though you can upload an html document, deviantArt won't display it as such. Care should be taken to make sure that any document uploaded from your computer includes only dA accepted tags.

If you want to know whether deviantArt accepts a certain tag, test it in the text editor by clicking the "Add Text" button. After entering the code, press the "Preview" button. If it displays as you intended, then dA accepts that code and you can use it in your deviations.

Below is a list of dA accepted html tags and a description of what they do and are used for, as well as examples of each. There may be some codes that aren't on the list, so if you want to do something that I don't mention, try it with the preview option of the text editor before giving up.

Quotations around a value seem to be a must for every tag with an attribute (this is when the tag has two separate words, and you have to enter a value, like this: <tag attribute="value"></tag> ).

a

The a tag can be used with the href attribute to create a link. (special notes: Writing a webpage address by itself won't make a link. Previewing a link in the dA text editor won't show the link underline, but it will be there after submitting the deviation) Don't forget to use quotation marks around the link address, or else it won't work.

Example:
<a href="http://www.deviantart.com">Link example</a>
Link example

The a tag can also be used with the name attribute. The purpose is to create a label. This is used to aid in linking to a place within a literature deviation, which can be useful for long submissions. There doesn't need to be anything between the beginning and ending tags (so this tag can be completely invisible to readers). It just needs to be placed in an area you would like to link to at some point. It could be useful to enter a name that you'll recognize for that area. (important note: The name you enter can be as long or short as you like, but it can't contain numbers or spaces) When you make a link to that area, you can link to # followed by the name you chose, or add # and the name to the end of the deviation URL to have a workable address to that place from outside of the deviation. The deviation title (below the deviation and above the artist's comments) is linked to the deviation URL.
It's important to note that deviantArt's stacks and galleries will mess up the short version of the link, so you should always use the whole address (the deviation URL followed by # and the name). Even so, it would be best to use this tag only when absolutely needed. If a person is viewing a stack or gallery, clicking the whole-address link will kick them out of the stack/gallery, redirecting them to the deviation page and at that particular spot.

Example:
Added where you want the link to go: <a name="linkexampletwo"></a> Added elsewhere in the deviation (version 1): <a href="#linkexampletwo">link example 2</a> Added elsewhere, inside or outside the deviation (version 2): <a href="http://asjjohnson.deviantart.com/art/Literature-Deviation-Tutorial-244242294#linkexampletwo">whole link example 2</a>
Added elsewhere in the deviation (version 1): link example 2 Added elsewhere, inside or outside the deviation (version 2): whole link example 2

Version 1 only works when a person is on the deviation page. If they are viewing the deviation within a stack or gallery, the link will take them to the stack/gallery (this seems to be a bug or glitch). Version 2 works all the time, but when a person is viewing the deviation within a stack or gallery, it will redirect them to the deviation page, kicking them out of the stack or gallery. Perhaps it would be best to use these types of links outside the deviation (to link to specific parts of a deviation, from outside the deviation).

abbr

The abbr tag is used for abbreviations, such as dev. for deviantArt. When using this tag, it must be used with the title attribute. When someone puts their mouse over the abbreviated word, a tooltip will show with the non-abbreviated version (which you must add to the tag with quotation marks). When using this tag, some browsers may show a dotted underline under the text, but other browsers won't display it any differently than normal text, so I would suggest grouping the abbr tag with another tag, such as the u tag, so people will know there's something special about that piece of text (although you could also mention it in parenthesis or something). It's recommended to use this tag for little known abbreviations, but only the first time they're mentioned in a deviation.

Example 1:
<abbr title="abbreviation">abbr</abbr>
abbr

Example 2:
<u><abbr title="abbreviation">abbr</abbr></u>
abbr

acronym

This tag is similar to the abbr tag above. The acronym tag is used for acronyms, such as DA for deviantArt. I would suggest using the u tag with this tag, so that users will know there's something they can do with that piece of text (some browsers will show a dotted underline, but Internet Explorer 8 and under won't). Don't forget the quotation marks around the word. It's recommended to use this tag for little known acronyms, but only the first time they're mentioned in a deviation.

Example:
<acronym title="as soon as possible">ASAP</acronym>
ASAP

b

This tag is used to make words appear bold. It's recommended to only use this tag for looks (and even then, it's probably not a good idea to make all of your text bold). If you want to put strong emphasis on some text, you should use the strong tag (see strong for more information).

Example:
<b>this text is bold</b>
this text is bold

blockquote

This tag indents a while paragraph of text and is meant to be used for long quotes (quotes that are about three lines long, give or take a line). When quoting something with a blockquote, quotation marks aren't needed. (take note of the space above and below the example blockquote. This tag adds a few line breaks.)

Example (quoted from FAQ #627):
<blockquote>There is alas a limit, namely 65,535 characters. There are a few things that can increase the amount of characters you have used drastically. These include links, punctuation marks, and hitting return. Hitting return count as 4 characters Punctuation marks ('";:!? etc) can account for 4-8 characters each depending which one you use</blockquote>

There is alas a limit, namely 65,535 characters. There are a few things that can increase the amount of characters you have used drastically. These include links, punctuation marks, and hitting return. Hitting return count as 4 characters Punctuation marks ('";:!? etc) can account for 4-8 characters each depending which one you use

br

This tag is used in html to drop down one line. It's not needed in the dA text editor, because you can press the enter key on the keyboard, but it can be used. When you do use br tags to add line breaks, they're treated the same as pressing enter, and if you press enter after a br tag, you'll drop down two lines instead of one. I would suggest you only use br tags if you plan on uploading an .html document (and then, don't use the enter key at all in that document) When using this tag, you don't need a closing tag.

Example:
hello<br>there.
hello
there.

code

This tag is supposed to be used for displaying computer code. It will display text with a monospaced font, like the tt tag. It won't keep html from working.

Example (css code shown, which can't be used in literature deviations):
<code>P{text-indent: 10px; color: #000;}</code>
P{text-indent: 10px; color: #000;}

dd, dl, and dt

These three tags are used in definition lists. dl starts the definition list, dt is the definition term, and dd is the definition definition. Pay really close attention to how the tags are used in the example. The dt tags go around the terms and the dd tags go around the definitions.

Example:
<dl><dt>fanart</dt><dd>Art based on an existing work, created by fans of said work.</dd><dt>fanfiction</dt><dd>A work of fiction based on an existing work, created by fans of said work. A subset of fanart.</dd></dl>

fanart

Art based on an existing work, created by fans of said work.

fanfiction

A work of fiction based on an existing work, created by fans of said work. A subset of fanart.

em

This tag is used for emphasizing words. It's usually displayed as italics (but can be displayed as bold), and is preferred over the i tag.

Example:
"What are <em>you</em>doing here?"
"What are you doing here?"

font

This tag can be used with the face attribute, the size attribute, and perhaps some other attributes (but those are the only two I've found). I would recommend avoiding the font tag, because it doesn't work well with the reader toggle buttons. (notice that the so-called "large" text in the example is no longer large when the large text mode is on)

Example:
Default text, <font face="arial">Arial text, </font> <font face="times new roman">Times New Roman text,</font> <font size="4">larger text</font> <font face="times new roman" size="4">and larger Times New Roman text</font>
Default text, Arial text, Times New Roman text, larger text and larger Times New Roman text

hr

This tag makes a horizontal rule (a line that goes from one side to another). When using this tag, you don't need a closing tag.

Example:
<hr>

---

h1, h2, h3, h4, h5, and h6

These tags are used for headings and subheadings (as such, headings show up on a line by themselves). h1 is the level-one heading, making it the most important. As the numbers go up, the heading gets smaller and less important. You may want to experiment a little with the headers in the dA text editor preview before submitting a deviation. The headers seem to give the best results when you don't add much blank space between a header and the text below it, because the headers automatically add line breaks. h2 may or may not be indented, and doesn't change color when viewed in dark mode; h3 and h4 may or may not change color when viewed in dark mode; h1, h2, h3, and h4 don't change size when the font size toggle button is pressed; and h5 and h6 have a lot of space around them.

check to make sure headers look right in the different toggle modes after submitting a deviation.

Example:
These are examples of an <h1>H1 heading, </h1><h2>H2 heading, </h2><h3>H3 heading, </h3><h4>H4 heading, </h4><h5>H5 heading, </h5><h6>and H6 heading</h6>
These are examples of an

H1 heading,

H2 heading,

H3 heading,

H4 heading,

H5 heading,

and H6 heading

i

This tag is used to make words appear italicized. It's recommended to only use this tag for looks (and even then, it's probably not a good idea to make all of your text italicized). If you want to put emphasis on some text, you should use the em tag (see em for more information).

Example:
<i>this text is italicized</i>
this text is italicized

li

This tag is used with either the ol tag or ul tag to make lists. li stands for list item and is used for entries of a list. Begin and end a list with either an ol tag or ul tag, and then surround each list item with li tags.

Example 1:
<ol><li>hover over "Submit"</li><li>Click "Submit Art"</li><li>fill out form</li></ol>

1. hover over "Submit"
2. Click "Submit Art"
3. fill out form

Example 2:
<ul><li>prose</li><li>poetry</li><li>scripts and screenplays</li></ul>

• prose
• poetry
• scripts and screenplays

ol

This tag is used with the li tag above to make lists. ol stands for ordered list. It numbers items in a list and is usually used for a list of steps.

Example:
<ol><li>hover over "Submit"</li><li>Click "Submit Art"</li><li>fill out form</li></ol>

1. hover over "Submit"
2. Click "Submit Art"
3. fill out form

p

This tag is used in html for paragraphs, but doesn't seem to have any purpose in literature deviations (unless maybe to make it so that readers can't indent text when pressing the paragraph indent button). Paragraphs can't be aligned (although that would be a good thing to allow).

Example:
<p>This doesn't seem to have much use besides adding space before and after text and keeping readers from indenting</p>

This doesn't seem to have much use besides adding space before and after text and keeping readers from indenting

strike

This tag (which wasn't mentioned in the usable tag list) is used to put a horizontal line through the middle of a line or lines of text.

Example:
<strike>This text has been marked through.</strike>
This text has been marked through.

strong

this tag is used for strong emphasis. It's usually displayed as bold text (but can be displayed as italics), and is preferred over the b tag. It's for a stronger emphasis than the em tag.

Example:
"How <strong>dare</strong> you?!"
"How dare you?!"

sub and sup

Most people on dA know what the sub and sup tags do. The sub tag subscripts text (makes text small and below), and the sup text superscripts text (makes text small and above). These tags are meant for things like footnotes, chemical formulas, and other such things. They shouldn't be used just to make text look smaller.

Example 1:
4H + O₂ = 2H₂O
4H + O₂ = 2H₂O

Example 2:
3⁴ = 81
3⁴ = 81

tt

This tag is used to make teletyped or monospaced text. It's meant to make letters all the same size.

Example:
<tt>These characters are all the same width</tt>
These characters are all the same width

u

This tag is used to make words underlined. It's recommended not to use this tag, because underlined words can be mistaken as links (but I think it may be okay to use with abbr and acronym tags, since the reader needs to put the cursor over those words, anyhow, but use your own judgment). the em and strong tags are better choices for emphasizing words.

Example:
<u>this is not a link</u>
this is not a link

ul

This tag is used with the li tag above to make lists. ul stands for unordered list. It puts bullets in front of list items and is usually used for lists in which the ordering of the list items doesn't matter.

Example:
<ul><li>prose</li><li>poetry</li><li>scripts and screenplays</li></ul>

• prose
• poetry
• scripts and screenplays

Tips and tricks

While writing text, either press the Enter key on the keyboard twice, or use the br tag twice, to leave a space between paragraphs. The paragraph toggle button doesn't add space between paragraphs when in non-indented mode, causing single-spaced paragraphs to be hard to see at times. The p tag automatically creates space around paragraphs, but if you use p tags, the paragraph toggle button won't indent that text.

Only press enter (or use the br tag) once after a header. The headers automatically add a line break, so you need to take that into consideration (but it's personal preference whether or not to have extra space around a header). The same is true for blockquotes and lists.

Use the enter key to add line breaks when typing text in the deviantArt text editor or when you know you'll want to edit it later, use br tags to add line breaks in .html documents that you want to upload to deviantArt later, but never use both in the same file. Using the enter key makes it easier to edit deviations in the dA text editor later, and using br tags lets you preview your deviation in an html document before uploading it (but html documents ignore the enter key, so you must remember to never use the enter key in your html document, or else you'll have twice as many line breaks as you want).

Since a text deviation can't be edited after closing the dA text editor (except after submitting the deviation), use Notepad in conjunction with the editor (copy and paste all text into Notepad before closing the editor, or write in Notepad and copy and paste into the editor to preview it). Also remember to turn off Word Wrap before copying text from Notepad into the dA text editor, or else the soft returns made by Word Wrap will be interpreted as normal line breaks.

Use the dA permitted html tags together for extra customization. Such as making bold italics, or custom headers if you dislike how your headers look. You can use lists together to make nested lists, where a list item is another list. In which case, you would put <li><ul>...</ul></li> (where the ... is the rest of the list code).

Don't use special dA codes in literature deviations, such as :iconAsjJohnson: or :faq104:, because they won't work. On the other hand, to show dA accepted html code without the code working (like I've done in this deviation), put another code inside each tag. Like this: <<i></i>a href="http://www.deviantart.com">dA<<i></i>/a>

Try not to prevent the deviation toggle buttons from functioning properly. Don't use the font tag unless you have to. The text-size and font-size toggle buttons are there for readers who wish to read the text at a certain size or in a certain style. It's said to be easier to read sans serif text online (but some people prefer serifs), and some people have trouble reading small text. Besides, specifying a larger text size for an important word or phrase can backfire, because that word or phrase may appear smaller than the rest of the text when the deviation is viewed in large mode. The paragraph toggle button gives the readers a choice between indented paragraphs and non-indented paragraphs for prose pieces. Don't manually add indention to the beginning of paragraphs in your prose pieces, and avoid using the p tag.

View literature deviations after submitting them. Proof-read the deviation, and glance through it after clicking on each of the toggle buttons. If anything doesn't look right, simply edit the deviation.

Keep in mind that dA can be a little buggy, so literature deviations can look slightly different at different times. This includes the paragraph toggle button not always working (even when the text was submitted correctly), the headers showing up differently (sometimes the h2 headings are indented, and not at other times, as well as h3 and h4 sometimes changing colors when dark mode is turned on, and other times remaining gray), and probably a few other things.