Dread Romantic: Making a Wholesome Apocalypse with CSS & BBCode

This holiday season, we’ve been highlighting some amazing work from the World Anvil community. We’re celebrating YOUR creativity, and connecting you with some inspiring articles, worlds, and ideas. One such article is this very cool interactive fiction piece from R. Dylon Elder of Dread Romantic. So we sat down with this Sage creator to get some fresh inspiration! Check out our text interview below:

Q: Where did you get the idea for this unique world?

The Idea for Dread Romantic as a world came from a lot of different places, but it started with a play on words that became the world’s slogan: “An apocalypse you can hope for.”

I wanted a realistic take on the end of the world and a world that tackles mental health issues, but I wanted it to be a rustic apocalypse that people would genuinely want to live in. While drama can happen and the topics can be serious, I wanted to write a world that makes people smile.

Influences include Adventure Time, Stardew Valley, Animal Crossing, Discworld, holiday dinners, the Addams Family, new age religion, tons of music, debilitating trauma, the general feelings I have for coffee and tea… It’s a weird blend and I love it for that.

I also recently got introduced to terms like cottagecore and “cozy” fiction which is still blowing my mind. It makes you smile. It’s warm and inviting, and usually low stakes, relatively speaking. It’s wholesome. Then you have a nice helping of existential dread on top, for flavor. That came from the Influences I took from Bo Burnham’s Inside and… well, life.

Q: Wow, that’s a really eclectic set of influences! The presentation of Dread Romantic is remarkable. What was your creative process like?

With the Influences picked out and lined up like an awkward family picture, I had to decide how I was going to present the world. I wanted this world to have as little scrolling as possible and allow for engagement from the reader.

I wanted to allow the reader to explore deeper into subjects they were interested in within the article instead of long blocks of text pulling them toward the end. It allows the reader to make choices like a text RPG.

That’s when Stormbril, The Dark Lord of CSS got involved. I approached Storm and he really seemed to like the idea. The biggest issues were figuring out just how to work within the rules of what World Anvil allows.

Q: Nice! Can you describe the technical solution you worked out with Stormbril?

It’s easy to take things away and hide what wouldn’t be needed for the end goal. It was easy to shift the like and follow buttons as well, but making individual “pages” or “slides” that would transition from one to another proved to be the biggest hurdle.

Storm worked up several solutions, settling on using nesting containers and the relations between those containers. Once we knew the selectors and made sure they would only work if toggled on using spoiler buttons, it was really just a matter of structuring the bbcode and CSS so each slide appears after the other in the right order and each button corresponds to a specific container. This ends up being a template I use to make the work easier for each article.

The real secret is using z-index for everything the reader sees. Everything is in order, layered on top of each other. The previous slides don’t disappear, they’re just under the current slide. All that was really done is shifting locations of elements, hiding what I don’t want the reader to see, and only showing what’s needed at any given time.

It took a lot of work for both me and storm to get the first article looking good, but once complete, it’s ridiculously easy to keep it going for more articles. Not every article needs to be an event, but this one is different. It’s got the title in it and everything.

Dread Romantic introduces the characters of the story and where they live. It needed to be special. The best part is towards the end, when the images corresponding to specific slides transition on top of the slides and text.

This is actually a little bit of trickery on my part. I realized I could alter the position of images and set them up using z-index to show one on top of the other. As long as they are roughly the same size, the previous image is covered during the transition. The same trick used to transition slides also fades in the images.

This means, if read in order, the reader gets to watch images change representing various locations within the titular walking island and metaphysical shop, Dread Romantic.

It was awesome working with Storm and toying with what World Anvil can do. I’m excited for what’s to come, as other things are in the works for the world that can push the envelope even further.