A Guide to Experimental Formatting in Writing
soda_and_capes told me to do it! SO I SHALL. Because I'm a consumer whore he's awesome.
ETA: Updated with more useful and accessible codes, thanks to the astute comments of sailorptah and zvi_likes_tv!
In my memory, my first contact with well-written stories using font colors and experimental formatting was the work of Mythchan. Now, DA doesn't allow for a lot of formatting with text so she'd linked to the full versions on an LJ, and let me tell you internets, I was blown away - the style, the visual impact of it all, I LOVED IT. And my first thoughts after "WOW" were, "Damn, I could never write like that." I'd always been a pretty bare-bones writer that way - sure, I liked to bust out the ten-cent words and I had no objection to long, grammatical sentences, but overall I was pretty content to work within standard textual parameters.
Not for long.
After seeing Mythchan's work, despite being convinced that I could never write like that (which is partially true; even at my most experimental I could hardly imitate her particular style, nor do I want to - her art's hers, mine is mine), I was possessed with desire to try. I found ways to start sneaking it in - a little paragraph-formatting here, some invisible text there, and before I knew it I was perfectly happy to spend hours with LJ's preview button making sure I had all the colors just so.
In the end, it isn't that difficult. All you need is some basic HTML, a color chart at hand, and the willingness to say, what the hell, let's get some formatting in this joint!
You may regret it. I don't.
Quick Note and Disclaimer: I do most of my posting through LJ and on a Mac, unless I am so driven by inspiration I start writing on a school or work PC. Depending on the OS, browser, and individual monitor settings, not all coding is going to turn out perfectly consistent. There is nothing you can really do about this besides check how it looks on several computers or get feedback from friends with different computers. Also, not all sites will allow you to use all of the formatting, so keep that in mind - Deviantart and the Archive of Our Own don't allow colors, to name the other two that I use, and I can't speak for any other sites.
At some points in this entry I will be commenting on quality of writing and some ableism issues, so I would to state, right up front, that at no point would I claim that my writing/coding are omg the awesome! or omg the best examples of x and y ever! Because, um, totally not true. I'm using my writing for examples because it is the only writing that I have rights over and because I know it pretty well, but that does not mean I think that a) I am always doing it right/have always done it right (totally haven't!) or b) it is the be-all and end-all of writing in general. I'm learning and working to improve, like anyone else, and I'm always happy to hear some constructive criticism - that includes this post. If I say "I usually handle X by doing Y and that seems to work well," and you feel that my doing Y actually makes things worse? Please, please feel free to tell me so. I don't bite, and I don't let Vlad bite, either. X3
"Wait a second," you may be saying. "HTML's easy! Why would you say that this is the hard part? Isn't figuring out what parts need to be in colors and aligned to the right and stuff the hard part?"
To which I can only sigh and say, "Learn to love the preview function. LOVE IT." Because okay, yes, the basic coding used for any given story I've done is in fact basic and easy to learn. Making it actually look the way you want it to look and keeping the colors, styles, and spacing consistent without a single typo that messes up everything? That part, not so much.
If you will, please allow me to outline and describe the usual set of codes I use for any experimentally formatted story, just so we're all on the same page as far as coding goes... If you already know coding, you can go ahead and skip this part. XD
Alignment Codes
These are what you use to, for example, put words in the middle of the page (like the little heading up above), or aligned to the right side of the page rather than to the left (which is standard in LJ and most sites that I see on the interwebs).
To align writing to the right, like this, you use the text
.
To close the code and go back to the standard alignment, you use
.
To center writing, you use , and to end it, .
These are fairly simple codes, but where they get tricky is the line spacing.
In the posting box I started typing this text right after the previous line, but as you can see,
the coding automatically starts the new alignment on the next line.
This line also appears in the same line after the closing tag in the entry box, but a whole blank line appears between the right-aligned text and the left-aligned text after posting.
With centered text, you run into a similar problem, except without
the automatic blank line when returning to standard alignment.So depending on the look you're going for, if you use these codes, you will be wanting to preview a LOT to make sure the places you want to have blank lines will have them and vice versa, and you will pretty much always have that blank line after a right-aligned code, so plan for that effect as you write.
Another useful code is (which doesn't require a closing tag); on LJ this creates an extra line of blank space, and on the Archive of Our Own it creates a centered horizontal line, which is awesomely useful for creating chapter breaks. (I learned this from checking out FAQs on the Archive.)
If you want to include images in your experimental story (I haven't to date in a story, but I am planning to later in this post, so it's useful to know in general and who knows where your muses will lead you), the code you need will be the code to insert the image, coupled with another bit of coding to create alt text. Fortunately this code is also quite simple! To insert an image, the code is
, with a link to the image you want instead of a filler link. For alt text, instead of closing the code immediately, after the image link and the " you'll add alt="Text describing your image" and then close the tag with >. For extra fun, to add one of those little hovering text boxes so beloved by certain comic creators, after the alt text and before the closing > you can add title="Clever text for the box" and then close it.
Sample of all three codes at work!
Bonus Code: < and >, minus the amps and the semicolon between amp and lt/gt, are what create in the text without actually functioning as coding. This is a handy thing, thanks to the awesome sailorptah for pointing it out! ♥
Font Codes
The fun codes! These are what you use to create font colors, different sizes, etc.
creates small text, and is closed with .
creates struck-through text, and is closed with .
creates italicized text, and is closed with .
creates bolded text, and is closed with (you may be noticing a pattern here). These four codes can be mixed and matched in various ways to create different effects, particularly when combined with colors (we're getting there, promise!).
Note: You can also create italics, struck-through text, and bold text with the tags /, /, and /, but using em, del, and strong is more accessible for people who use screen readers, which don't get the significance of the others as coding and will not emphasize the text appropriately. Since using em, del, and strong is pretty much the absolute freaking minimum you can do accessibility-wise, I strongly encourage using them! Further notes on accessibility are at the end of the HTML section. (Many thanks to sailorptah for making me aware of this!)
To make your text a certain color, the code is , closed by . The "#colorcode" bit will, in practice, look like "#FF9900" - a combination of letters and numbers which you will have to pick off a chart, unless you spend so much time coding that you have the whole set memorized. You can google HTML color code charts easily enough, but this color code chart is a good one; you can just highlight and copy the color code you want. There are charts that provide more colors than that one, but 216 is probably more than enough to start off with and you can be sure that those colors will appear the same cross-browser/OS (individual monitors will still vary). For invisible text, I usually use a font color that is the same as the background color, which will only be noticeable when highlighted; there are other ways to do this, I think, which people use for spoilers, but I don't know them off the top of my head, so if you want to try it a different way you'll have to check elsewhere.
One drawback of coding colors the way I have done (and am about not to do anymore, ahaha) is that if the page is viewed in someone else's style/light formatting, the colors will be lost or not work properly. To get around this, you can use CSS coding, which - I do not yet know, but am going to sit down and learn! The excellent zvi_likes_tv very kindly linked to a good beginner's page for learning CSS, which is at this link.
An important note about font colors: be careful of your choices! When choosing the colors, be aware of the background that they'll show up on (is it white? Black? Brown? Purple?) and how that will affect their appearance. You want to create a striking appearance; you don't want to make your readers' eyeballs bleed. Choose colors wisely! (More on this in the second part.)
And a further note: if you are making liberal use of html formatting (not sure if things end up this cluttered with CSS), the posting box is going to look like a gigantic mess of HTML, such that you can barely keep track of the actual words. This is normal and okay! The preview button will also be very handy here, because it shows you the text without the codes in the way (just the coding's effects) and will help you keep track of what you've actually written.
Example 1: A screenshot of a certain Utena fic, as it appears in the posting box.
Quite a mess, isn't it?
Example 2: How that coding appears in practice.
Much neater, and allows you to see what you've written so that you can go back and make changes. (Since previewing will also show any faults in the coding - unclosed tags, misattributed colors, etc. - it is seriously your very best friend.)
Now, these are obviously not all of the codes available for editing alignment and font appearance; there are probably gazillions of them out there. I personally don't use anything beyond these and I find that you can use them to get a really striking range of effects as you combine them, but by no means should you feel limited to what's in this entry. It's a wide, wide internet - make all the use of it that you want!
Further Notes on Accessibility
Earlier I mentioned that when writing it's better to use em, del, and strong tags rather than i, strike, and b to provide greater accessibility to people who use screen readers. Unfortunately, other than the alt text/title codes, that is about all that is accessible when it comes to experimental formatting. All of the codes here are primarily visual codes that will give a visual effect that screen readers are (as far as I know) not going to pick up on.
And you know, that is okay. It happens. There's nothing wrong with wanting to add some visual flair to your story, even if that means there's a layer of the work that's inaccessible to a blind/colorblind/partially sighted/other reader. Here's the thing to remember when you're adding all this: the actual story is the important part. Colors, emphasis, strikes, formatting, these provide an extra element to the story, but they should not be the story to the extent that the story is unreadable without them. Depending on how you write your drafts this may be easy or difficult, but if possible you should keep a version of the story that lacks the colors to judge how well it stands without them. And if it doesn't make sense without the colors, you have some rewriting to do, particularly if this story is going out to the web at large. If you're writing for yourself and your two BFFs who are all sighted, obviously it doesn't much matter, but if you're writing for Yuletide or another ficathon or the general internet, it is in fact pretty important to take into account that not all people on the internet are going to see the colors and formatting, and to write/code accordingly.
If you yourself are a blind/partially sighted/other writer interested in writing experimentally formatted fic, well - I am actually not really qualified to give you much advice! I apologize and wish you the best of luck in finding other resources.
When I first looked at Mythchan's writing lo these many years ago, one of the main obstacles that I thought stood in my way to writing in that style was the question, "How can you possibly know what's supposed to be what color or format?" In retrospect, this was a silly obstacle, because I had been using font colors in my AIM roleplays with friends for years at this point without any major problems, and the basic principles are pretty much the same. The key is to know, as you write, what meaning the colors and formatting have within the story. Some general handy usages are as follows:
1. To represent a specific character's voice.
2. To represent another point of view/voice within a character's mind (unspoken thoughts, disagreement from the conscience, a memory, separate trains of thought going on simultaneously).
3. To add color associations/symbolism to specific words within the story (such as the ka-thungks with shades of red in the Utena fic).
4. To indicate the distance or separation from the main text of a secondary viewpoint/voice (hypothetical example: an old note from another character in a paler shade of that character's color, as if faded with time).
As with the coding above, all of these can be combined and recombined near-infinitely to different degrees for various effects, and you should feel free to use them as little or as much as you wish, as well as figure out your own ways to use formatting; this is experimental fic, not a "write exactly like someone else" exercise. The key point is that whatever combination you end up with, you must be consistent with it throughout the fic, or it is going to turn into a confusing mess. If you pick colors according to character voices, you should not suddenly turn around and use the color for one character's voice to represent an old letter from a different character, or use the color that earlier was associated with death-words to symbolize spring, unless that is the effect you are going for, in which case make sure that the actual text supports and signals the change as well (remember, not everyone is going to see the colors anyway!). If you have to draw up a chart or keep a separate file of text-colors and their associations as you write? You're doing it right! (Actually, depending on whether you code as you go or add coding in later, having a separate text file with all the colors and codes you'll be using can be really handy for just C&Ping what you need.)
For a live example of the process at work, let's look at the story I've been using as an example for most of the rest of the entry: the infamous Utena fic! (Keep it open in a separate tab or window if you plan to follow along.) As it was fic for Utena, a series widely renowned for trippy symbolism and artsyness, it was a natural choice for experimentation.
For the story I used font colors to represent character voice, with a touch of color symbolism/hidden text and a little formatting to separate the dialogue in the story-telling sections and provide interjections in the main text. Since it's an anime fandom fic, the easiest way to choose colors for the characters was by hair color, so I ended up with pink for Utena (only used once, but still important!), dark purple for Anthy, and a light blue (it has a lavender tone! Really! Okay not so much but at least it was readable against the background) for Dios; Akio's voice, being the main bulk of the text but for the final section, is the default text color for ease of reading - too much color can be overwhelming and take away from the impact. It's important while choosing character colors to pick colors that are representative of the character in some way so that the reader makes the connection between the character and the colored text, but also to pick colors that, given the background color of your journal and the amount of text written in that color, will not cause your readers to cry blood. Seriously, that's not the impact you want. Some bright colors that are reasonably readable on a dark/black background will be squint-worthy on a light/white background, and some colors that are fine in small doses will induce headaches if they continue for paragraphs. Always think carefully before you pick a color, and preview it to see how it actually looks in your journal!
Also, when using colors for character voices, keep track of when you want to use the colors and when to let the default color reign. In the Utena story, virtually all of the Akio viewpoint narration is in the default color, direct dialogue included, but with interjections from Anthy and Dios in their colors; the sections in Anthy and Dios's narration are told in their colors, and Dios's dialogue in Anthy's narratives is also in his color. The small centered bits in the default color are Akio's own observations, contrasting with Dios's answers. While writing it is perfectly okay to assign colors to text by intuition - I mean, it's writing, it's all out of your head anyway - but once you're done with the draft, be sure to go back through and look carefully at which parts have colors and which don't, and what you think needs or doesn't need more color, and get it all consistently assigned. Once more, preview button = your new BFF. (You don't even want to know how many times I used it just writing this entry, ahahahaha...)
You'll also notice that in this story the interjections from Anthy are aligned to the right, as is Dios's dialogue in Anthy's narratives, and a few other little bits of formatting (centered text particularly). I went with this formatting because I like the sense of distance from and opposition to the main text that it creates - opposition being especially useful for interjections, of course, and distance for dialogues, particularly where the participants are speaking but unable to communicate, like Anthy and Dios's dialogues. Centered text can be a bridge between dialogue on opposite sides of the page, a second thread of interjection when right-alignment is already being used, or represent a concurrent level of thought/action in the text. Important note: I was not actually thinking this while I was writing! My thought process was more like, "It will totally look cool if I put Dios's dialogue on the other side of the page! I'm going to do that." This is a perfectly fine way to write, as with the colors mentioned above, just remember to check afterwards to make sure you've used your formatting consistently and in a way that makes sense within the story.
For colors that aren't character voices, the same basic rules apply: choose colors that will convey the meanings/associations you want. Your personal impressions of colors will probably be what you reach for first, but it's not a bad idea to Google or otherwise search for further information on color symbolism to make sure it's a reasonably common association, or to ask your beta(s) about what impressions they get from that particular color if they're sighted. Some will probably be obvious enough considering the text itself, like putting the word "blood" in red text or "spring" (referring to the season) in green, but more subtle symbolism you might want to check.
Regarding invisible and near-invisible text: I like to throw in a little of this for various reasons dependent on the story. In the Kaiji fic I wrote, I used it to include the anime and manga's trademark "zawas" without making them obnoxiously obvious; in the Utena fic I used it in one line as a way to interweave two messages. It's a handy tool to have, but as mentioned earlier, make certain that the text actually will be invisible in your journal style, and you'll probably want to warn for it in the warnings/description of your story.
Okay I'm done rambling pretentiously now! Hope this is of use to someone - it was pretty fun to put together. ♥
ETA: Updated with more useful and accessible codes, thanks to the astute comments of sailorptah and zvi_likes_tv!
In my memory, my first contact with well-written stories using font colors and experimental formatting was the work of Mythchan. Now, DA doesn't allow for a lot of formatting with text so she'd linked to the full versions on an LJ, and let me tell you internets, I was blown away - the style, the visual impact of it all, I LOVED IT. And my first thoughts after "WOW" were, "Damn, I could never write like that." I'd always been a pretty bare-bones writer that way - sure, I liked to bust out the ten-cent words and I had no objection to long, grammatical sentences, but overall I was pretty content to work within standard textual parameters.
Not for long.
After seeing Mythchan's work, despite being convinced that I could never write like that (which is partially true; even at my most experimental I could hardly imitate her particular style, nor do I want to - her art's hers, mine is mine), I was possessed with desire to try. I found ways to start sneaking it in - a little paragraph-formatting here, some invisible text there, and before I knew it I was perfectly happy to spend hours with LJ's preview button making sure I had all the colors just so.
In the end, it isn't that difficult. All you need is some basic HTML, a color chart at hand, and the willingness to say, what the hell, let's get some formatting in this joint!
You may regret it. I don't.
Quick Note and Disclaimer: I do most of my posting through LJ and on a Mac, unless I am so driven by inspiration I start writing on a school or work PC. Depending on the OS, browser, and individual monitor settings, not all coding is going to turn out perfectly consistent. There is nothing you can really do about this besides check how it looks on several computers or get feedback from friends with different computers. Also, not all sites will allow you to use all of the formatting, so keep that in mind - Deviantart and the Archive of Our Own don't allow colors, to name the other two that I use, and I can't speak for any other sites.
At some points in this entry I will be commenting on quality of writing and some ableism issues, so I would to state, right up front, that at no point would I claim that my writing/coding are omg the awesome! or omg the best examples of x and y ever! Because, um, totally not true. I'm using my writing for examples because it is the only writing that I have rights over and because I know it pretty well, but that does not mean I think that a) I am always doing it right/have always done it right (totally haven't!) or b) it is the be-all and end-all of writing in general. I'm learning and working to improve, like anyone else, and I'm always happy to hear some constructive criticism - that includes this post. If I say "I usually handle X by doing Y and that seems to work well," and you feel that my doing Y actually makes things worse? Please, please feel free to tell me so. I don't bite, and I don't let Vlad bite, either. X3
"Wait a second," you may be saying. "HTML's easy! Why would you say that this is the hard part? Isn't figuring out what parts need to be in colors and aligned to the right and stuff the hard part?"
To which I can only sigh and say, "Learn to love the preview function. LOVE IT." Because okay, yes, the basic coding used for any given story I've done is in fact basic and easy to learn. Making it actually look the way you want it to look and keeping the colors, styles, and spacing consistent without a single typo that messes up everything? That part, not so much.
If you will, please allow me to outline and describe the usual set of codes I use for any experimentally formatted story, just so we're all on the same page as far as coding goes... If you already know coding, you can go ahead and skip this part. XD
Alignment Codes
These are what you use to, for example, put words in the middle of the page (like the little heading up above), or aligned to the right side of the page rather than to the left (which is standard in LJ and most sites that I see on the interwebs).
To align writing to the right, like this, you use the text
.
To close the code and go back to the standard alignment, you use
.
To center writing, you use , and to end it, .
These are fairly simple codes, but where they get tricky is the line spacing.
In the posting box I started typing this text right after the previous line, but as you can see,
the coding automatically starts the new alignment on the next line.
This line also appears in the same line after the closing tag in the entry box, but a whole blank line appears between the right-aligned text and the left-aligned text after posting.
With centered text, you run into a similar problem, except without
the automatic blank line when returning to standard alignment.So depending on the look you're going for, if you use these codes, you will be wanting to preview a LOT to make sure the places you want to have blank lines will have them and vice versa, and you will pretty much always have that blank line after a right-aligned code, so plan for that effect as you write.
Another useful code is (which doesn't require a closing tag); on LJ this creates an extra line of blank space, and on the Archive of Our Own it creates a centered horizontal line, which is awesomely useful for creating chapter breaks. (I learned this from checking out FAQs on the Archive.)
If you want to include images in your experimental story (I haven't to date in a story, but I am planning to later in this post, so it's useful to know in general and who knows where your muses will lead you), the code you need will be the code to insert the image, coupled with another bit of coding to create alt text. Fortunately this code is also quite simple! To insert an image, the code is
, with a link to the image you want instead of a filler link. For alt text, instead of closing the code immediately, after the image link and the " you'll add alt="Text describing your image" and then close the tag with >. For extra fun, to add one of those little hovering text boxes so beloved by certain comic creators, after the alt text and before the closing > you can add title="Clever text for the box" and then close it.
Sample of all three codes at work!
Bonus Code: < and >, minus the amps and the semicolon between amp and lt/gt, are what create in the text without actually functioning as coding. This is a handy thing, thanks to the awesome sailorptah for pointing it out! ♥
Font Codes
The fun codes! These are what you use to create font colors, different sizes, etc.
creates small text, and is closed with .
creates struck-through text, and is closed with .
creates italicized text, and is closed with .
creates bolded text, and is closed with (you may be noticing a pattern here). These four codes can be mixed and matched in various ways to create different effects, particularly when combined with colors (we're getting there, promise!).
Note: You can also create italics, struck-through text, and bold text with the tags /, /, and /, but using em, del, and strong is more accessible for people who use screen readers, which don't get the significance of the others as coding and will not emphasize the text appropriately. Since using em, del, and strong is pretty much the absolute freaking minimum you can do accessibility-wise, I strongly encourage using them! Further notes on accessibility are at the end of the HTML section. (Many thanks to sailorptah for making me aware of this!)
To make your text a certain color, the code is , closed by . The "#colorcode" bit will, in practice, look like "#FF9900" - a combination of letters and numbers which you will have to pick off a chart, unless you spend so much time coding that you have the whole set memorized. You can google HTML color code charts easily enough, but this color code chart is a good one; you can just highlight and copy the color code you want. There are charts that provide more colors than that one, but 216 is probably more than enough to start off with and you can be sure that those colors will appear the same cross-browser/OS (individual monitors will still vary). For invisible text, I usually use a font color that is the same as the background color, which will only be noticeable when highlighted; there are other ways to do this, I think, which people use for spoilers, but I don't know them off the top of my head, so if you want to try it a different way you'll have to check elsewhere.
One drawback of coding colors the way I have done (and am about not to do anymore, ahaha) is that if the page is viewed in someone else's style/light formatting, the colors will be lost or not work properly. To get around this, you can use CSS coding, which - I do not yet know, but am going to sit down and learn! The excellent zvi_likes_tv very kindly linked to a good beginner's page for learning CSS, which is at this link.
An important note about font colors: be careful of your choices! When choosing the colors, be aware of the background that they'll show up on (is it white? Black? Brown? Purple?) and how that will affect their appearance. You want to create a striking appearance; you don't want to make your readers' eyeballs bleed. Choose colors wisely! (More on this in the second part.)
And a further note: if you are making liberal use of html formatting (not sure if things end up this cluttered with CSS), the posting box is going to look like a gigantic mess of HTML, such that you can barely keep track of the actual words. This is normal and okay! The preview button will also be very handy here, because it shows you the text without the codes in the way (just the coding's effects) and will help you keep track of what you've actually written.
Example 1: A screenshot of a certain Utena fic, as it appears in the posting box.
Quite a mess, isn't it?
Example 2: How that coding appears in practice.
Much neater, and allows you to see what you've written so that you can go back and make changes. (Since previewing will also show any faults in the coding - unclosed tags, misattributed colors, etc. - it is seriously your very best friend.)
Now, these are obviously not all of the codes available for editing alignment and font appearance; there are probably gazillions of them out there. I personally don't use anything beyond these and I find that you can use them to get a really striking range of effects as you combine them, but by no means should you feel limited to what's in this entry. It's a wide, wide internet - make all the use of it that you want!
Further Notes on Accessibility
Earlier I mentioned that when writing it's better to use em, del, and strong tags rather than i, strike, and b to provide greater accessibility to people who use screen readers. Unfortunately, other than the alt text/title codes, that is about all that is accessible when it comes to experimental formatting. All of the codes here are primarily visual codes that will give a visual effect that screen readers are (as far as I know) not going to pick up on.
And you know, that is okay. It happens. There's nothing wrong with wanting to add some visual flair to your story, even if that means there's a layer of the work that's inaccessible to a blind/colorblind/partially sighted/other reader. Here's the thing to remember when you're adding all this: the actual story is the important part. Colors, emphasis, strikes, formatting, these provide an extra element to the story, but they should not be the story to the extent that the story is unreadable without them. Depending on how you write your drafts this may be easy or difficult, but if possible you should keep a version of the story that lacks the colors to judge how well it stands without them. And if it doesn't make sense without the colors, you have some rewriting to do, particularly if this story is going out to the web at large. If you're writing for yourself and your two BFFs who are all sighted, obviously it doesn't much matter, but if you're writing for Yuletide or another ficathon or the general internet, it is in fact pretty important to take into account that not all people on the internet are going to see the colors and formatting, and to write/code accordingly.
If you yourself are a blind/partially sighted/other writer interested in writing experimentally formatted fic, well - I am actually not really qualified to give you much advice! I apologize and wish you the best of luck in finding other resources.
When I first looked at Mythchan's writing lo these many years ago, one of the main obstacles that I thought stood in my way to writing in that style was the question, "How can you possibly know what's supposed to be what color or format?" In retrospect, this was a silly obstacle, because I had been using font colors in my AIM roleplays with friends for years at this point without any major problems, and the basic principles are pretty much the same. The key is to know, as you write, what meaning the colors and formatting have within the story. Some general handy usages are as follows:
1. To represent a specific character's voice.
2. To represent another point of view/voice within a character's mind (unspoken thoughts, disagreement from the conscience, a memory, separate trains of thought going on simultaneously).
3. To add color associations/symbolism to specific words within the story (such as the ka-thungks with shades of red in the Utena fic).
4. To indicate the distance or separation from the main text of a secondary viewpoint/voice (hypothetical example: an old note from another character in a paler shade of that character's color, as if faded with time).
As with the coding above, all of these can be combined and recombined near-infinitely to different degrees for various effects, and you should feel free to use them as little or as much as you wish, as well as figure out your own ways to use formatting; this is experimental fic, not a "write exactly like someone else" exercise. The key point is that whatever combination you end up with, you must be consistent with it throughout the fic, or it is going to turn into a confusing mess. If you pick colors according to character voices, you should not suddenly turn around and use the color for one character's voice to represent an old letter from a different character, or use the color that earlier was associated with death-words to symbolize spring, unless that is the effect you are going for, in which case make sure that the actual text supports and signals the change as well (remember, not everyone is going to see the colors anyway!). If you have to draw up a chart or keep a separate file of text-colors and their associations as you write? You're doing it right! (Actually, depending on whether you code as you go or add coding in later, having a separate text file with all the colors and codes you'll be using can be really handy for just C&Ping what you need.)
For a live example of the process at work, let's look at the story I've been using as an example for most of the rest of the entry: the infamous Utena fic! (Keep it open in a separate tab or window if you plan to follow along.) As it was fic for Utena, a series widely renowned for trippy symbolism and artsyness, it was a natural choice for experimentation.
For the story I used font colors to represent character voice, with a touch of color symbolism/hidden text and a little formatting to separate the dialogue in the story-telling sections and provide interjections in the main text. Since it's an anime fandom fic, the easiest way to choose colors for the characters was by hair color, so I ended up with pink for Utena (only used once, but still important!), dark purple for Anthy, and a light blue (it has a lavender tone! Really! Okay not so much but at least it was readable against the background) for Dios; Akio's voice, being the main bulk of the text but for the final section, is the default text color for ease of reading - too much color can be overwhelming and take away from the impact. It's important while choosing character colors to pick colors that are representative of the character in some way so that the reader makes the connection between the character and the colored text, but also to pick colors that, given the background color of your journal and the amount of text written in that color, will not cause your readers to cry blood. Seriously, that's not the impact you want. Some bright colors that are reasonably readable on a dark/black background will be squint-worthy on a light/white background, and some colors that are fine in small doses will induce headaches if they continue for paragraphs. Always think carefully before you pick a color, and preview it to see how it actually looks in your journal!
Also, when using colors for character voices, keep track of when you want to use the colors and when to let the default color reign. In the Utena story, virtually all of the Akio viewpoint narration is in the default color, direct dialogue included, but with interjections from Anthy and Dios in their colors; the sections in Anthy and Dios's narration are told in their colors, and Dios's dialogue in Anthy's narratives is also in his color. The small centered bits in the default color are Akio's own observations, contrasting with Dios's answers. While writing it is perfectly okay to assign colors to text by intuition - I mean, it's writing, it's all out of your head anyway - but once you're done with the draft, be sure to go back through and look carefully at which parts have colors and which don't, and what you think needs or doesn't need more color, and get it all consistently assigned. Once more, preview button = your new BFF. (You don't even want to know how many times I used it just writing this entry, ahahahaha...)
You'll also notice that in this story the interjections from Anthy are aligned to the right, as is Dios's dialogue in Anthy's narratives, and a few other little bits of formatting (centered text particularly). I went with this formatting because I like the sense of distance from and opposition to the main text that it creates - opposition being especially useful for interjections, of course, and distance for dialogues, particularly where the participants are speaking but unable to communicate, like Anthy and Dios's dialogues. Centered text can be a bridge between dialogue on opposite sides of the page, a second thread of interjection when right-alignment is already being used, or represent a concurrent level of thought/action in the text. Important note: I was not actually thinking this while I was writing! My thought process was more like, "It will totally look cool if I put Dios's dialogue on the other side of the page! I'm going to do that." This is a perfectly fine way to write, as with the colors mentioned above, just remember to check afterwards to make sure you've used your formatting consistently and in a way that makes sense within the story.
For colors that aren't character voices, the same basic rules apply: choose colors that will convey the meanings/associations you want. Your personal impressions of colors will probably be what you reach for first, but it's not a bad idea to Google or otherwise search for further information on color symbolism to make sure it's a reasonably common association, or to ask your beta(s) about what impressions they get from that particular color if they're sighted. Some will probably be obvious enough considering the text itself, like putting the word "blood" in red text or "spring" (referring to the season) in green, but more subtle symbolism you might want to check.
Regarding invisible and near-invisible text: I like to throw in a little of this for various reasons dependent on the story. In the Kaiji fic I wrote, I used it to include the anime and manga's trademark "zawas" without making them obnoxiously obvious; in the Utena fic I used it in one line as a way to interweave two messages. It's a handy tool to have, but as mentioned earlier, make certain that the text actually will be invisible in your journal style, and you'll probably want to warn for it in the warnings/description of your story.
Okay I'm done rambling pretentiously now! Hope this is of use to someone - it was pretty fun to put together. ♥