#HTML tags for spans

[the-kiarah-organisation]

Pierro: What kind of snake are you?

Changsheng: Don't you know it's rude to ask a woman her species?

Pierro: ...

Pierro: Okay.

[miscellaneous2848]

Y'know what? I'm not going to reblog this directly because the post is a spoiler. For the quiz. Yeah, this quiz has spoilers. Do this first then look at the post!! >:D

[rotting-ink]

I've just started my very first twine game, I'm a complete coding newbie so apologies if this is a stupid question, but how do you get the settings to show up on the sidebar? lol I've just about managed to change the colour and add an image to it, but that's about the extent of my progress lol

OOO BABY. okay.

im going to help you... all in one go. okay? so take all the code under the cut and slap that into the javascript section it changes font and font size. also gonna add in the code that gives you autosaves, which are a fecking life saver. gonna yap more under the cut

Also the notes inside the // is just to keep track. I'm pretty sure I got all of mine from the @idrellegames, they've got teh BEST list.

// SETTING ONCLICK FUNCTIONS FOR BUTTONS AS SOON AS PAGE IS LOADED $(document).ready(function() { $("#sidebar-toggle-icon").click(function(){ $("#sidebar").toggleClass("toggled"); }); $("#saves-button").click(function() { UI.saves(); }); $("#settings-button").click(function() { UI.settings(); }); $("#restart-button").click(function() { UI.restart(); }); $("#backwards-button").click(function() { Engine.backward();

});$("#forwards-button").click(function() { Engine.forward();

});$("#ui-dialog-close").html('<span class="lnr lnr-cross"></span>'); console.log(UIBar.stow());

});

// POPULATING SETTINGS

// CHANGE FONT FAMILY var settingFontFamily = ["Vollkorn", "Georgia", "Arial", "Verdana"]; var setFont = function() { var passages = document.getElementById("passages"); switch (settings.fontFamily) { case "Vollkorn": passages.style.fontFamily = "'Vollkorn', serif"; break; } switch (settings.fontFamily) { case "Georgia": passages.style.fontFamily = "'Georgia', serif"; break; } switch (settings.fontFamily) { case "Arial": passages.style.fontFamily = "'Arial', sans-serif"; break; } switch (settings.fontFamily) { case "Verdana": passages.style.fontFamily = "'Verdana', sans-serif"; break; } };

Setting.addList("fontFamily", { label : "Change font", list : settingFontFamily, onInit : setFont, onChange : setFont });

// end change font family

// CHANGE FONT SIZE var settingFontSize = ["18px", "20px", "22px", "24px"]; var setFontSize = function() { switch (settings.fontSize) { case "18px": passages.style.fontSize = "18px"; break; } switch (settings.fontSize) { case "20px": passages.style.fontSize = "20px"; break; } switch (settings.fontSize) { case "22px": passages.style.fontSize = "22px"; break; } switch (settings.fontSize) { case "24px": passages.style.fontSize = "24px"; break; } };

Setting.addList("fontSize", { label : "Change font size", list : settingFontSize, onInit : setFontSize, onChange : setFontSize });

// adds autosaves - tag a passage 'autosave' to trigger saving config.saves.autosave = "autosave";

//saves Config.saves.onSave = function (save) { save.title = prompt("Enter Save Slot Title:", save.title); };

[snarp]

How do I fucking....... iterate through HTML selecting all the text that's rendered as italicized/bolded/etc via CSS rules and such so I can wrap it in 'i' 'b' tags so I can easily strip out all the span class='msword-keysmash12 calibre-keysmash21 googledocs-keysmash76' onclick='popupAd()' style='text-decoration: migraineaura; font-size: 1.0002em; color: #000001;'

Programmatically I mean I don't want a GUI tool. I would prefer Ruby but I imagine that Javascript is the Sane Person way to do this

[fynn-cerulean]

HOW DO YOU MAKE THE TEXTS IN OTHER COLORS THAN THE STANDARD ONES-

Hope you're familiar with HTML :)

On Tumblr, there's an HTML editing option for posts (not available on mobile)

Basically, you can switch the Text Editor option to HTML, and it will open up an HTML editor.

In the image below, the purple tags can be any regular tag you want, like <p>, <h1>, <li>, etc.

The <span> tag is where it gets interesting, but its exact contents aren't too important, except for the underlined portion. That's where you put the custom color, in Hex format. The text inside the <span> is the text that will end up the color you input. In this case, the color is #abcdef, which is a light blue.

If you input that into the HTML editor, you get:

text

And that's all there is to it.

Color picker

[hihereami]

I've decided to go ahead and report the new desktop feature that eliminates icons from reblogs to Tumblr Support

Send your feedback!

Click here - Category ''feedback''. I don't know if it'll amount for much but I'd rather have them a wave of formal feedback than fake ignorance about the userbase's discontent.

Here's a template if you wanna copypaste:

Hello! I've realised Tumblr has made the decision to not show icons from reblogging users in my desktop dashboard. This decision is truly impractical for most of the userbase, who are used to identifying the people they follow by icon. It makes the user experience actively worse. Besides from that, I also want to report the feature that takes you to a rebbloging user blog when you click on it instead of taking you to their reblog on their blog. Also, clicking on the post shouldn't take you directly to the OG poster blog. Clicking on previous reblogs and ''tracking'' the flow of reblogs that took the post of your dashboard is common practise (as is checking out the tags). Please do understand these measures aren't improving the site: not for newcomers nor for the longtime userbase. People do not come to the site for a Twitter/IG/Tiktok replica, they come for its unique features that you're slowly stripping away. These are: - Tags. They aren't an useless hashtag system like IG, they are a genuine organisation system when searching for specific content. In reblogs, they serve as organisation and as commentary. Commentary in the tags is one of the most unique feautures of the site. - Reblogs as flexible and creative intervention. Different versions of the same post can circulate for years. We have posts from a decade ago still appearing on our dashboards. It's one of the better features of the site --- trend cycles don't span a few days like other social media. - This is a blogging site as well as a social media site. Embrace that, please. Access to the desktop view (where you could customise a blog's html look) as well to easy access to the Account is unique and essential. The sidebar doesn't work. It doesn't look good and it's clunky UX-wise.

[html-tryhard]

And that's a wrap!

The inaugural HTML Tryhard 2025 Fanfiction Event Week has come to a close. Thanks so much to everyone who participated! All entries for this event can be found on the AO3 collection.

This year, we had a total of 21 works spanning 24 fandoms. The biggest fandom to participate was Harry Potter, which currently has total of 555,256 works on AO3, and the smallest fandom to participate was Leviathan - Thomas Hobbes, which has a current total of 2 works on AO3.

Y'all contributed to create exactly half of this fandom tag.

The biggest overlap was the Batman - All Media Types fandom, at 3 entries. A majority of entries were the only entry for their fandom. It really goes to show that writers from all fandoms are finding fun and innovative new ways to tell stories.

It's almost like you tried to actively avoid each other.

We only had 2 HTML tutorial entries, but that means we had 19 story entries! That's a lot! Not only did people write chat fics and fancy new-age epistolary stories (with in-universe posts from Twitter, Tumblr, Snapchat, and even Yikyak), they also wrote choose your own adventure stories (with multiple endings!), and works that were completely unique that pushed the boundaries of storytelling.

The event collection will be officially closed on this coming Sunday (1/26), but if you have additional entries to add, just let us know.

That's all for this year. Hope to see you all again next year!

[mightyoctopus]

Low key tearing up because I found yet another screen reader inaccessible ebook website. I just want to read. Is that too much to ask? All I want is to be able to open a website and be able to read it.

Making text screen reader accessible is the easiest thing in the world. You have to do literally nothing. It’s text. Screen readers are literally build to read text on a screen.

If you’re a total noob who knows nothing about HTML and you just put your text in your document, nothing else, it’s accessible. You put it in a <p> tag? Accessible. Span? Div? All accessible. You can fucking echo it in a PHP file and it will be accessible.

Text is literally accessible by default. How do all these people manage to fuck it up so bad????? I wouldn’t be able to do that if I tried!

The only consistently accessible literature website, if you can call it that, is AO3. Fan fiction is great. I love fan fiction, but I don’t want to read only fan fiction. There’s a long list of books I want to read – fiction, but especially non fiction.

And there’s a long list of websites where these books are available, both legitimate and piracy. And yet! And yet I cannot read them, because I am disabled. Because I do not read with my eyes, but with my screen reader. Because nobody cares about us enough to even consider us when building and formatting a website. Because nobody cares about us enough to do a single manual test or run a free accessibility checker extension.

I just want to read. Is that too much to ask?

[xiaokuer-schmetterling]

PODFICCER (and fic author) RESOURCE: things i learned about HTML today

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

end post

[pensivespacepirate]

made a little house of leaves text replacement script for Firefox with the FoxReplace extension ! instructions under the cut

basically replaces house with

<span style ="color:#6570ae">house</span>

and minotaur with

<span style ="color:red"><s>minotaur</s></span>

firefox installation method:

get the FoxReplace extension: https://addons.mozilla.org/en-US/firefox/addon/foxreplace/

Script: save the following as a .json file, and import it into FoxReplace:

{ "version": "2.6", "groups": [ { "name": "House of leaves", "urls": [], "substitutions": [ { "input": "house", "inputType": "text", "outputType": "text", "output": "<span style =\"color:#6570ae\">house</span>", "caseSensitive": true }, { "input": "minotaur", "inputType": "text", "outputType": "text", "output": "<span style =\"color:red\"><s>minotaur</s></span>", "caseSensitive": true }, { "input": "House", "inputType": "text", "outputType": "text", "output": "<span style =\"color:#6570ae\">House</span>", "caseSensitive": true }, { "input": "Minotaur", "inputType": "text", "outputType": "text", "output": "<span style =\"color:red\"><s>Minotaur</s></span>", "caseSensitive": true } ], "html": "output", "enabled": true, "mode": "auto&manual" } ] }

notes:

I haven't finished House of Leaves yet so it currently only substitutes house and Minotaur.

Recommended to turn on Automatic substitution On page load

Not recommended to Apply automatic substitutions every few seconds, it moves your cursor in an opened text editor. sadly cant see the house in blue while im typing this post

-> edit: it only affects the tumblr post editor??

Not recommended to change the HTML to input&output (currently output only) because it would fuck up URLs and tags

[sunflwrapple]

Hii im Dolly, and I wanted to ask u a question. It’s kinda stupid but uh how do u change the color of the text😓

But if you’re looking for different colors that the mobile version doesn’t have—lemme introduce u to the site “patorjk.com” u can tap on the link and it’ll take u there :D

# of Colors : is where u can select how many colors u want; options up to 20!

Color presets : which is like the name, u can pick out whichever u want if you’re lazy or looking for inspiration!

Colors : u can choose whatever color u want!

Fade type : it’s up to ur choice but I just go with horizontal since I’m lazy

Output code: made sure u use HTML (span tags)

After ur all satisfied u hit the “generate color faded text”

When u press the “generate color faded text” it will take u here ⬇️

Then you have to select all the color code in the box—so the next step is kinda tricky, u have to enter Safari (logging into ur tumblr acc) then u scroll up to find the cog gear symbol and press on it then it will take u to, then scroll down to “Text Editor” and press HTML! Then u can paste the color code u copied from the patorjk.com then u hit “save” (the orange button below)

Example!

And there u have it :D

[transienturl]

You know what, I'll bother making this post. It's long overdue.

PSA: Please don't install uBlock Origin rules for Tumblr that use :nth-of-type(), and please remove or fix any you have installed. They can and will hide the wrong things. I'll show you a few alternatives below.

First, an example of how we get here. I've used the uBlock Origin element picker to try to hide the "Get a Domain" sidebar item:

With some different adjustments of the sliders, it gave me these two snippets, one of which targeted a whole bunch of sidebar items, and the other of which selected the right one. Great, right? Read on.

www.tumblr.com##li.g8SYn.IYrO9:nth-of-type(7) www.tumblr.com##.gM9qK > li.g8SYn.IYrO9

As you can see, these both target a particular kind of sidebar item via "li.g8SYn.IYrO9"—fine—and as you can probably guess, the second one counts them all up and hides the seventh it finds.

This is bad, because what it actually hides depends on exactly how many sidebar items there are! Users can "snooze" Tumblr Live, which will make an item appear or disappear, and users with/without Ad-Free subscriptions will have or not have another. I have seen many, many people accidentally hide their activity, messages, inbox, etc using someone else's rule that's supposed to hide Live. Worse, some rules intended for e.g. recommended post carousels that use nth-of-type translate to something like "hide item number three on the dashboard no matter what it is," which will lead to a seemingly random post on your dashboard disappearing!

This isn't a problem specific to Tumblr, of course—I personally think uBlock Origin should never autogenerate these rules—but Tumblr has a ton of elements that aren't in fixed positions, so I feel comfortable wording that PSA the way I did. On a very static site, those rules might be fine. Here they almost always aren't.

So how do we fix this? First of all, as a developer of XKit Rewritten (check out @addons!), I must suggest you check if it has a feature to do what you want. Plenty of times it won't, though, and if not, we want to make a rule that hides an element based on what it is, not where it is. Here are three ways to make a robust rule:

First, I'll right-click the element I want and use the inspect element tool in my browser's developer tools to look at the element I really want (Firefox and Chrome/Edge/Opera have different but overall similar interfaces for this):

The HTML looks, for reference, like this (Tumblr sucks at code blocks but I'll try):

<li class="IYrO9 g8SYn" title="Get a domain"> <a class="tDT48" href="/domains"> <div class="kn4U3"> <svg> <use href="#managed-icon__earth"></use> </svg> </div> <div class="a132D"> <span class="ZC1wz">Get a domain</span> <!-- other unimportant stuff removed--> </div> </a> </li>

What's something unique about this element, preferably about the outermost element, and preferably contained within the <angle brackets> (HTML tags)? In this case, we have it easy: title="Get a domain" is definitely unambiguous and fulfills all of those three. If you're very familiar with web design using CSS, you'll know how to target that; if you've vaguely heard of CSS, you may be able to look at a reference sheet of CSS selectors, see [attribute=value], and figure it out, and if neither is true, I'll spoil it for you and say that we just put it in square brackets in this case.

So—taking the rule uBlock Origin made, removing the :nth-of-type() and replacing it with our better selector—here's our first working, bug-free uBlock Origin rule:

##li.g8SYn.IYrO9[title="Get a domain"]

Okay, great. But what if we didn't have that attribute to target? What if our top-level element looks the same as the other ones? What if we want this rule to work if we change our Tumblr language to Spanish? Let's move on to :has().

:has() is a CSS selector (supported in uBlock Origin even in browsers where you can't use it for web development yet, i.e. Firefox), that lets you check the contents of an element for whatever is in the parentheses. Let's assume that Tumblr would never make two sidebar items with the same icon, and target that href="#managed-icon__earth" property:

##li.g8SYn.IYrO9:has([href="#managed-icon__earth"])

Yep, that works too!

Finally, what if we couldn't use either of those because we need to target the content of the page that's not contained within the <angle brackets>? We can take a look at the uBlock Origin documentation and find that it has something for that too: :has-text(). You can do very powerful things with this (e.g. you can sort of implement Blacklist entirely using uBlock Origin using something like article:has-text), but it doesn't perform well and can pretty easily be used incorrectly, so I'd suggest you avoid it when possible.

However, let's try using it here to target the "Get a domain" label text:

##li.g8SYn.IYrO9:has-text(Get a domain)

And that also works!

With these techniques, you should be able to target any specific thing you'd want to hide without using any fragile positional selectors. If you're going to share your uBlock Origin rules with others, please make use of this! If you're just using your rules for yourself, then hopefully I've given you enough information so that you can understand what a rule does and decide for yourself if it's worth bothering to fix (menu item order might not change that often, so maybe you're fine with certain rules being a bit prone to breakage; if your rule hides the first post in your timeline you really do need to fix that one!)

-

And, of course, a note for you web developers out there: :has() isn't natively supported in Firefox quite yet, so you can't really use it (I would not recommend using JQuery's simulated version—it's not quite the same). And :has-text() is just not a thing for CSS at all. Just use javascript at that point! Edit: No longer true in 2024; style away!

Final note: any rule with a random 5-character string like g8SYn will eventually break when Tumblr rebuilds its CSS map, though they haven't done that in ages. But when they do: no, it's not "Tumblr devs breaking our rules because they hate us." (Yes, I hear that sentiment a lot in contexts when it almost always makes zero sense.) If you're fairly experienced with CSS you can sometimes make Stylus/uBlock Origin rules that don't reference any, but it's usually convoluted and more trouble than it's worth.

[b-b-8]

HOW TO MAKE YOUR GOOGLE DOC FIC POSTABLE TO AO3: A GUIDE

Write the fic. Sorry.

Go to any HTML converter site. I use this one.

Copy your fic to the correct box. It will output a second version with HTML tags.

Copy the HTML version, and paste it into NOTEPAD (or an equivalent).

Using the Replace All feature, get rid of any unwanted formatting. This is usually at least extra paragraph breaks in between paragraphs and the span tags.

You now have an HTML version of your fic to paste into AO3.

[ibraesil]

Since the release of HTML5 in 2008, tags such as <b> (bold), <i> (italic) have been softly deprecated for the benefit of users of screenreaders*; instead, it is preferable to use the semantic tags <strong> and <em> (emphasis) respectively, with style defined in CSS. If for some reason they aren't appropriate, it's still preferable to use CSS style attributes within a <span> container to ensure that your text will be interpreted correctly in modern (and future) browsers.

That's why the only tone tag I accept is '/span'. /span

* also to clarify the division between content (HTML) and style (CSS)

[streetlights-was-taken]

Hello! I hope I don't bother you again. I have two questions for you (I think there are more). I'm writing a zosan fanfic and I came up with the idea of ​​putting "titles" in what happens in the "chapters" separated by the divider, like the titles of anime episodes (very One Piece with spoilers about what happens in the episode), I would like to know what do you think of this idea? I have images of what these titles would look like if you want them for better visualization. 2- Is there a skin work on ao3 that imitates these "titles", as if they were chapter titles of a book (but without having to have several chapters as I want to make a oneshot)?

hello! yes, I think that sounds like a neat idea. you should go for it!!

I don't watch one piece so I hope I'm visualizing it right. if I got it wrong, feel free to send me a picture.

anyway. are you trying to do something like this?

if this is what you're going for, you can try this code out! I also created a pastebin for this one, so you can just copy paste to your own workskin.

so here, we're creating the lined-title css class. you can just add it to your <p> tags in the html when you want to apply them. e.g.

<p class="lined-title">TITLE</p>

feel free to play around with border-style and the border-color (or any other attribute). you'll want border-style:solid if you just want one single line, for example.

you can also check AO3's FAQ on what colors and fonts you can use. fun fact: border-style:double is the same css they use to add those double lines in the FAQ!

note that this will span the entire width of the page. so if you have a short title, it'll look like this on desktop:

if you don't want it to span the whole page, we could try this instead (also included in the pastebin link):

which will result in this:

however, we can't manipulate the spacing between the text and the lines in this one. on the other hand, it has text-decoration-style:wavy which the first option doesn't have!

for custom scene dividers, you can also check out these guides:

How to Make Customized Page Dividers by La_Temperanza

Dividers & how to style them by skinofthesoul

Rainbow Paragraph Divider by benwvatt

bonus: inspect element

also, are you familiar with inspect element yet? if you are, great! you can just skip this. otherwise, if you're still getting the hang of working with workskins and aren't used to editing css, you can try this:

right click on the text you want to change on AO3, then click "inspect" or "inspect element" (not sure what it's called in browsers these days; on firefox, it's just "inspect"). this will bring up a bunch of developer tools and it kinda looks like this:

it might look different depending on the browser.

but here on the side, you can see the html on top and css at the bottom. as you can see in the screenshot, we are inspecting the title and we can see the different css rules for the title.

if you want to play around with the css, you can just change them from this panel and it will automatically reflect on the page. these changes are not permanent so it's a good way to test different styles without having to go through the cycle of updating the workskin and refreshing the fic page.

if this is your first time trying this out, it might look overwhelming, but it's very helpful if you get the hang of it. but of course, you don't need to learn how to do this to style your fics. :D

[katzenklavierr]

Doing HTML cleanup + accessibility checking for a developing web course rn and how did my supervisor copy in so many empty and redundant span tags