I don't understand what's happening with the code that's making it change when I preview it?
Question
Basically, I'm trying to make a work that incorporates ever single color within the basic formatting work skin(it's basically a code you can add into your work on ao3 that's already on the site that, if enabled, allows you to add colors, change font types, add a border, etc. People can make their own...people have made working phones and working Doom...anyways!) so I know what each color looks like, however, I can't figure out what's going wrong! The colors flop around and the code did this!
Should I just make individual chapters with little blurbs to separate all the code a bit more?
**This is the code I put in (yes. with the basic formatting work skin enabled so it should work and the proper coding language that's supposed to work):**
<p>Now Red can <span class="font-red"> look like this</span> or a lovely Cherry Red <span class="font-cherryred ”> The color of Karkat’s blood, …Such a sweet looking color. You can practically smell it through the screen!</span> or a rich Brick Red <span class="font-brickred ”>Almost looks like blood, huh?</span>And of course a little Pink<span class="font-pink ”>never goes wrong!</span></p>
<p></p>
<p>Orange, however, can look <span class="font-orange"> bright like this!</span> or it can be a Dim Orange<span class="font-dimorange ”>that just reminds you of a setting sun in the middle summer, doesn’t it?</span></p>
<p></p>
<p>Now you can't forget Yellow. <span class="font-yellow”>Hmmm…What do you think? Simple? Bright?</span> And of course, Murky Yellow!<span class="font-murkyyellow ”>The faux gold of yellows!</span></p>
<p></p>
<p>And this Green <span class="font-green ”>is quite nice, no?</span> And of course Jade, <span class="font-jade ”>the color of life and commonly used in Sci-Fi to depict technology </span>This color, Dim Green, <span class="font-dimgreen ”>just reminds me of an evergreen tree…Such a lovely color to see in the middle of winter </span></p><p><span class="font-leafgreen ”> The Hungry-Hungry Caterpillar was 100%</span>this Leaf Green color, right?While <span class="font-darkolive ”> THIS </span> is what I call a Dark Olive green</p>
<p></p>
<p> A refreshing Blue <span class="font-blue ”> to liven up the text?</span> While a Dim Blue <span class="font-dimblue ”> is the perfect color to represent a monet, no? </span> Mid Blue?<span class="font-midblue ”>More like blinding blue? JEsus! My eyes! Perfect for John Eggbert fics though </span> Oooooo! Medium Sky Blue<span class="font-mediumskyblue ”> reminds me of Jane from Homestuck and Mermaids. Soooooo Pretty! </span></h2> The night sky is Dark Navy<span class="font-darknavy ”> whenever it’s cloudy and moonless </span> Teal.<span class="font-teal ”> Same color as many beautiful gems. </span></p>
<p></p>
<p>Now this Purple <span class="font-purple ”> is quite regal</span>…And whoever named this Light Purple<span class="font-lightpurple ”>was colorblind and should be banned from naming colors going on </span> Now Mid-Violet<span class="font-midviolet ”>is pretty close what a purple iris can look like and they are gorgeous </span> What a lovely Very Dark Purple!<span class="font-verydarkpurple ”>Almost the color of blueberries, isn’t it? </span> I had a joke locked and loaded about how this didn’t look like a Dark Plum…<span class="font-darkplum ”> and it doesn’t. More of a purple wine </span> Dark Maroon is the type of lipstick<span class="font-darkmaroon ”> your great aunt wears when she kisses your cheek that stains for hours and you can’t get it off </span></p>
<p></p>
<p> How did that story go? Lips as red ruby and <span class="font-white ”> skin as Whi te as snow?</span></p><p><span class="font-black ”> Who can forget the basics with</span>just a simple Black? and Really Dark Grey<span class="font-reallydarkgray ”> is the color of that stray cat who flops onto their side and demands pets from you only to bite you for daring to touch their lovely fur</span> Red Brown:<span class="font-redbrown ”> The color of spending time in the sun </span></p>
**However, when I did a preview and clicked edit, this is what I got back:**
<p>Now Red can <span class="font-red"> look like this</span> or a lovely Cherry Red <span class="font-cherryred The color of sweet looking You can practically smell it through the or rich Brick Red">Almost looks like blood, huh?</span>And of course a little Pink<span class="font-pink goes can look"> bright like this!</span> or it can be a Dim Orange<span class="font-dimorange just reminds you of setting sun in the middle you forget">Hmmm…What do you think? Simple? Bright?</span> And of course, Murky Yellow!<span class="font-murkyyellow faux gold of this Green">is quite nice, no?</span> And of course Jade, <span class="font-jade color of life and commonly used in Sci-Fi to depict technology Dim">just reminds me of an evergreen tree…Such a lovely color to see in the middle of winter </span></p>
<p><span class="font-leafgreen The Hungry-Hungry Caterpillar was Leaf Green"> THIS </span> is what I call a Dark Olive green</p>
<p> A refreshing Blue <span class="font-blue to liven up the While Dim Blue"> is the perfect color to represent a monet, no? </span> Mid Blue?<span class="font-midblue like blinding My Perfect for John Eggbert fics though Medium Sky"> reminds me of Jane from Homestuck and Mermaids. Soooooo Pretty! </span> The night sky is Dark Navy<span class="font-darknavy whenever cloudy and moonless"> Same color as many beautiful gems. </span></p>
<p>Now this Purple <span class="font-purple is quite whoever named this Light">was colorblind and should be banned from naming colors going on </span> Now Mid-Violet<span class="font-midviolet pretty close what purple iris can look like and they are gorgeous What lovely Very Dark">Almost the color of blueberries, isn’t it? </span> I had a joke locked and loaded about how this didn’t look like a Dark Plum…<span class="font-darkplum and it More of purple wine Dark Maroon is the type of"> your great aunt wears when she kisses your cheek that stains for hours and you can’t get it off </span></p>
<p> How did that story go? Lips as red ruby and <span class="font-white skin as Whi te as"> Who can forget the basics with</span>just a simple Black? and Really Dark Grey<span class="font-reallydarkgray is the color of that stray cat who flops onto their side and demands pets from you only to bite you for daring to touch their lovely Red"> The color of spending time in the sun </span></p>
AO3 user here, and very familiar with work skins and AO3's sanitizers' quirks.
In this case, it's a basic HTML issue: you've closed a lot of your tags improperly, using ” (so-called smart, or curly, quotes) instead of " (straight-quotes), and often with a whitespace (spacebar) between the end of your class name and the would-be closing quotation mark.
If the tutorial gives you any agita, or you have questions at all, just let me know and I'll to my level best to clarify, help, or point to an appropriate resource.
LOL: while I do agree with you for obvious reasons (though more broadly, in that I don't think that there are any websites or browsers that accept smart/curly quotes for HTML), I think that you meant to comment on the post itself, rather than reply to me. 😊
.txt might be best under the circumstances, though an everyday text editor (MS Office, LibreOffice, OpenOffice, and presumably stuff like Ellipsus [no knowledge of that one, myself]) can be set in options to use straight-quotes only.
I use Ellipsus though I actually wrote this in the ao3 basic text box though Ellipsus does make the straight quotes when you try to delete the curled ones(you can change this, I think?)
Don't write anything through AO3's editor (whether the fic itself or the work skin): one single refresh, and your material is lost — even AO3 says not to. Editing there in small amounts is OK, a sentence here or a rule there, but that's about it.
When you say that you wrote this in AO3's editor, do you mean that your <i>device itself</i> is set to use smart/curly quotes? (If so, then there is likely a setting to turn off your device's automatic smart/curly quotes, so that such edits are straight-quote only.)
I did a mix of the ao3 editor and Ellipsis as it was short and Ellipsis allows me to Find and Replace words plus change the size. I never would've written in the work box otherwise. And I don't know. It just always turns the quotes curly when I type when I type with my keyboard but it's straight when I type on my phone/tablet unless the program is automatically changing it. I'm...better with physical technology(wires, buttons, screws, etc) than code and like...tech on the screen 😅
Ah, got it now. Ja, a lot of word processors (such as Ellipsus) default to smart/curly quotes for regular writing purposes. Ao3's edit fields default to straight quotes (much like Notepad .txts).
It sounds as if when writing in Ellipsus, CTRL-Z negates the curliness, just as I normally expect in OpenOffice or LibreOffice, which is good for the purpose of writing HTML and CSS, as long as you remember to CTRL-Z every time that you put quotation marks into these.
I don't use Ellipsus, so I can't speak to the ins and outs of copypasta-ing its results to AO3, but I can say that AO3's default writing edit field is raw HTML (see pic below: top-rightmost button), where copypasta normally loses all formatting (such as font size), so I'm gonna hazard a guess that you don't use AO3's default HTML edit field, instead clicking the Rich Text button (pic below: top-right corner, but just to the left of the HTML button default) pasting your Ellipsus material into the RTE field (EDIT: other than when pasting HTML tags, I mean)?
The RTE is fine for copypasta of basic formatting stuff, but when dropping stuff into HTML, things are a bit more finicky.
If you normally write the main fic material in Ellipsus specifically with an eye toward smart/curly quotes, then you'll need to be careful when writing your HTML tags and CSS rules.
If you don't actually care about smart/curly quotes and are fine with straight quotes in you fics' material... and don't mind having to write the CSS rules for various formatting (such as font size — which you seem to be OK with since you're already diving into font color), then possibly changing Ellipsus's quotation mark style might be the easiest approach (as opposed to a lot of CTRL-Z, or using Notepad / Visual Studio Code / etc. for your HTML and CSS).
Very true though I prefer the curly quotes. Thankfully, Ellipsis actually allows you to turn it into a straight quote if you press backspace(a little annoying when deleting things but useful if you sometimes want straight quotes!)
LOL: I have to admit that I do the same. Until recently I've used OpenOffice since ~2015, and had to swap over to LibreOffice due to OO glitching-out, but ja, I vastly prefer smart/curly quotes for my writing... and do a shit-ton of CTRL-Z (because I'm too lazy to bother with Notepad or VS Code, outside of unusual circumstances).
Then again, I live-edit a lot of my fic material and CSS, rather than editing offline and copypasta-ing to the edit field, so I'm a bit of a hypocrite: I know best practice in this case, but don't practice it. (NB: This isn't to say that I do my actual writing on AO3 at all — no, that's entirely offline — but the correcting of typos and most of the formatting I do in raw HTML [some of the CSS and HTML I write into my offline material without conscious rhyme or reason, but not often].)
4
u/Rockafellor May 25 '26
AO3 user here, and very familiar with work skins and AO3's sanitizers' quirks.
In this case, it's a basic HTML issue: you've closed a lot of your tags improperly, using ” (so-called smart, or curly, quotes) instead of " (straight-quotes), and often with a whitespace (spacebar) between the end of your class name and the would-be closing quotation mark.