AO3 News

Post Header

Published:
2011-02-12 17:19:59 -0500
Tags:

So you want to apply some formatting to your fics! You probably already know how to use some basic HTML tags to make stuff <strong>bold</strong> or <em>italic</em>. But perhaps you want something a bit more complex - a different font, or maybe a different color. You can do this by creating some custom CSS for your works!

Cascading Style Sheets are a way to style elements of your story (or any webpage) without having to mess with the HTML markup itself. Where you used to scatter <font> tags all over your code to make some text look like this and some like that, you would now simply assign names (classes or IDs) to parts of your webpage and do all the styling in a separate document (the stylesheet). The upside of this is that if you decide to change the look of your page, you don't have to comb through the HTML code and change all the tags, you can just play around with the CSS rules until you find a style you like.

As is so often the case, things are a lot more complicated once you really dive in, especially if you use CSS to position elements on a page, but this shall not concern us here. You will most likely use CSS to apply a little formatting to your fic that goes beyond the allowed HTML tags, which is what this tutorial will be about.

The Basics

You may have already used Archive skins to change the way the Archive as a whole looks to you when you are logged in. Formatting a work uses the same basic principles: to apply styles to your fics, you create a "work skin" and define what classes you want to use in your stories and what they should look like. And while the general archive skins only affect the user that created them, the styling that you define for your fics will be visible to all readers (unless they disable custom styles; more on that later).

There are three HTML tags you might need in your works:

<div> - creates a container for all sorts of content
<p> - wraps around a paragraph and creates a blank line before and after it
<span> - is used for styling some words or phrases within a paragraph

To apply formatting to your story, you assign a class name to the HTML element in question and create rules for that class in your CSS skin. That sounds way more complicated than it is, so have an example:

Under Dashboard > My Skins > See Work Skins Instead you'll see a work skin like this, with CSS rules defined.

Screenshot of a work skin, showing example CSS

The #workskin at the beginning of each line is an id, and is added automatically. It makes sure that the CSS can be applied to your whole work, and isn't applied to the rest of the page.

The words which begin with a period, like .align-justify are classes. These allow you to create a specific rule and apply it to a specific bit of your work. When you define these in your work skin they must have the period at the beginning.

When you edit a work, you'll use markup like this to apply the CSS rules in your work skin.

Screenshot of the edit work page, showing the HTML markup needed to apply the CSS

(Note: There is no need to apply <p> tags to your whole work, just add tags and classes where you need them and leave the rest alone; the parser should take care of everything else. The Tutorial on HTML Sanitizing and Parsing has more information on marking up your works; however, we are aware of some issues with how the parser behaves right now and are working on fixing those. If you run into wonky-looking text in your own stories, do a quick check if the paragraph in question starts with a <p> tag and ends with </p>. If not, adding those yourself will usually take care of the problem.)

Caveats

If you style a story so heavily that it becomes unreadable or if the reader simply doesn't agree with your font choice, there's a "Hide Creator's Style" button on top of each work that will strip out all bells and whistles except for the basic HTML formatting. CSS formatting will not appear in downloads (.pdf, .epub or .mobi files) either. Keep this in mind when you apply CSS to structure your story and make sure it doesn't fall apart when all CSS is stripped out.

CSS formatting is a great way to enhance certain elements of a story, such as letters in an epistolary fic or character voices in a story that's told from two points of view, but it shouldn't overshadow the actual contents of the fic. Sometimes you really just want a <strong> tag. Conversely, while there is an option to "Hide custom styles on works" under Preferences, which will hide all CSS by default, you might lose out on some really neat stuff if you never see it in action.

Examples

You can find an example stylesheet under Public Work Skins that comes with the most common formatting options already in place. Chances are, if you just want to change some text alignment or font colors, you won't even need to build your own stylesheet. Of course, you can also add more classes or create separate skins as you go. The world is your oyster! Just don't forget to pick the skin from the "Custom Stylesheet?" dropdown when you post.

Let's have a look at some CSS classes.

-

#workskin .align-justify {
text-align: justify;
}

This will make your fic appear as justified text, i.e. neatly aligned on both sides, if you do this:

<div class="align-justify"> Your story goes here. </div>

-

#workskin .font-serif {
font-family: Cambria, Constantia, Palatino, Georgia, serif;
}

This will make a paragraph appear in Cambria if your reader has that font installed on their computer. If not, it will try for Constantia and so on, until it has to fall back on that reader's default serif font, which will be Times New Roman in a lot of cases. To do this, use the following in your fic:

<p class="font-serif">Your paragraph goes here.</p>

-

#workskin .font-orange {
color: orange;
}

This will turn a word in your story orange for the following code:

This is an <span class="font-orange">example</span> sentence.

-

Achtung! Keep in mind that the parser will interpret all carriage returns as linebreaks, so don't use new lines to make the code easier to read for you. They will get turned into <br /> tags.

Where you can use CSS

You can use CSS to style the main body of your work, and in notes fields. You can't use it in summaries, because these show up in indexes, where user-input CSS is not supported. So, if you want to use styled text to include warnings or spoilers, you'll need to put these in the notes field.

Practical Uses

To see how this all works in practice, check out our example story Sliding Doors.

The default display for the work will show you the CSS in action, giving a two column display. If you click 'Hide creator's style' then the CSS styling will be suppressed and you'll see the basic text. As an added bonus, you'll also see the HTML tags which were used to style each bit of the text. The CSS style rules are at the bottom of the page, so you can see how these match up to the HTML and how they were applied to the work. (Note: HTML tags won't normally be revealed when the creator's style is hidden - this was achieved with a bit of extra CSS magic for the purposes of the tutorial.)

Other Frequently Asked Questions About Styling Works


Can I use inline CSS?

No, sorry. We've chosen to limit CSS to work skins in order to preserve the separation of style and content. By creating reusable classes for your fics you can control all your formatting in one stylesheet, and we can easily strip your CSS from a story (important for accessibility reasons) without interfering with the site caching (important for performance reasons). Everybody wins!

Do I need a separate skin for every work I post?

No. The formatting rules you define in one stylesheet can be used and re-used in any of your fics. However, if you have a series of stories that rely heavily on CSS for consistent formatting, it might make sense to create a separate skin just for that set of stories.

What if I never want to see styling on other users' works?

Check the "Hide custom styles on works" box in your Preferences. Alternatively, you can disable styles on a case by case basis by clicking the "Hide Creator's Style" button above the story header.

Will the custom CSS also be applied to file downloads?

No. The files you download (pdf/html/epub/mobi) will have no CSS formatting.

Tutorials and References

For more help on using CSS for styling, you may find the below sites useful. CSS is used to style all modern websites, so there are lots of resources out there (and it's well worth learning a bit about it).


Comment

Post Header

Published:
2011-02-10 06:55:48 -0500
Tags:

The Archive of our Own will be down for maintenance today, Thursday 10 February, from c. 18.00 UTC, for approximately 6 hours (What time is this where I am?).

Today is the day of the new servers! Our colocation host has run some new power lines for our hungry beasts, and moved our trusty old servers into the rack with the shiny new ones. Today, we'll be switching over to actually using the new servers!

The switch means there will be extended Archive downtime. The Archive will be down today, Thursday 10 February, c. 18.00 UTC, for approximately 6 hours (What time is this where I am?).You can keep track of the Archive's status on our Twitter, AO3_Status.

You can lay in stores for the AO3 absence by using our handy-dandy download feature, which will let you have fic in HTML, PDF, epub or mobi format. You might also like to pass the time by contributing some of your fannish knowledge to our sister project the Fanlore wiki, currently asking fans to Share the Love and write about a friend in fandom!

Our trusty Systems admin, Sidra, will be working hard to set up the new servers and integrate the Archive into its new home. But there's one task still to complete - we're looking for names for our servers! Channel your creativity while the AO3 is gone into thinking up appropriate names for our seven lovely machines and join in our Server naming festival.

Hurray for new servers!

Comment

Post Header

Published:
2011-02-07 09:24:20 -0500
Tags:

Welcome to Revision 3609, up from 3520. Two small deploys to fix bugs with potential security implications, one giant bug fix release and one emergency fix for that thing where we decided to reinvent the alphabet on fandom listings. Cesy, Elz, Enigel, mumble, Pixel, Rebecca and Sidra all contributed code to this release.

Reminder: Archive downtime this week

This week, we're moving over to our brand new servers! This requires several periods of downtime as we move the old servers to their new rack (now with extra power!) and then switch on the new servers. Our first extended downtime was yesterday (when we deployed this release); the next two will be today, Monday 7 February, c. 17.00 UTC, for approximately 30 minutes (What time is this where I am?) and Thursday 10 February, c. 18.00 UTC, for approximately 6 hours (What time is this where I am?). For regular status updates follow our Twitter AO3_Status.

If you're at a loose end while the Archive is down, you might want to join in our server naming festival. We're looking for creative ideas for names for our seven beautiful machines.

Highlights


History feature

We've polished our history feature a little bit so that clicking the 'Mark to read later' button on a work results in a 'to-read' list on your 'History' page (instead of just marking the individual work). We have lots more improvements planned for the history feature in future (tag filters YES PLEASE) but while we work towards those we think that this small tweak will make a lot of difference to how useful the history feature is.

Importer

The lovely Rebecca has done lots of work spiffing up our import function. The problems with importing from Livejournal and Dreamwidth have now been fixed, and we've added import from DeviantArt (it still gets stuck on the adult content warning at present, though). We've also added an option to manually set the encoding for a site when you import - our importer tries to recognise the encoding itself, but sometimes that's not possible. If you get strange characters when you try to import, try manually setting the encoding and try a few different options to see which gets the best result.

Kudos

We've had lots of discussion on how and where kudos should show up (it was turning up in some unexpected places!) In order to keep it simple, we've made it belong to the work as a whole, not to individual chapters. This means a few kudos will disappear as we tidy up and make all consistent. Don't be alarmed! Your love has still been registered, but it will no longer show up multiple times.

Media page - new order!

Our Media page has been alphabetized - instead of the random order it was it before it now starts with Anime and Books & Literature and ends with Video Games. We're planning some more changes to this page in the future in order to make it more useful to users and more international in nature.

Known Issues

See our Known Issues page.

Release details


Features


  • added a button to the History page to only show to-read items, removed unnecessary preferences button
  • importing works: a custom import for DeviantART posts has been added, other features have been tweaked
  • CSS classes are now allowed in notes as well
  • more automated tests for new features and bug fixes
  • made media category page alphabetical

Bug fixes


  • fixed a security hole with user logins
  • fixed a glitch that made private bookmarks visible in some circumstances

  • kudos can now be left for the whole work only (and not on a chapter-by-chapter basis), but the list and button will still show up on every chapter for more convenience
  • cosmetic fix to prevent kudos section from spilling over the hearts icon
  • fixed a pesky bug that would prevent proper unrevealing of works in a gift exchange challenge
  • gift counts should now be accurate even if a work is a gift for two pseuds of the same user (if your gift count has changed, this might be the reason)
  • systems: changed re-indexing to run once a day, not every two hours
  • systems: some deploy branch maintenance
  • importing works:
    • importer now properly ignores LJ metadata
    • DW import has been unbroken
    • tweaks to the Yuletide story importer
    • importing stories from fanfiction.net now sets the proper posting date
    • timeout during import now produces a meaningful error message
    • importer doesn't eat special characters anymore
    • span and div tags in imported works will now be preserved
    • in case you run into problems, you can now manually set the encoding for your work
    • usage hints on the import page have been tidied up a bit
    • fixed a glitch where a fic for 'General Audiences' would get imported as 'Mature'
  • neatened up homepage title a little
  • added a "try clearing your cache" note to the maintenance 503 page
  • fixed a bug where putting in non-canonical tags for a work would give an error message meant for challenge signups
  • autocomplete for tags is now prioritising the most used tags again (A side effect for this fix was a temporary jumbling of the fandoms pages - if you were disconcerted to see formerly alphabeticized lists in a strange order, this was why. It was swiftly fixed by our awesome coder, Elz.)
  • fixed a bug that would only find/allow characters and relationships for the first fandom if more than one fandom had been specified in a new work or a challenge signup
  • unbroke tag comments and links in comment notifications for wranglers
  • signing up as a tag wrangler for an unassigned fandom now fills in the fandom in question for you
  • fixed a HTML glitch on the abuse report page
  • closed an open div on work preview pages that would lead to wonky-looking bottom navigation
  • made the media type dropdown on fandom indexes stand out a bit more
  • if a media category from the dropdown is empty, a "No fandoms found" message is shown
  • the 'reason for your request' box for invites was shrunk to a less intimidating size
  • abuse reports are now listed by date
  • fixed a bug that made it possible to create posted work with no posted chapters
  • when you post a new work, the "Does this fullfill an assignment" ticky box will not display challenges that you defaulted on or already posted your assignment for
  • fixed a bug that would prevent some users' series pages from loading
  • the external bookmark form now fills in the URL and title field
  • small cosmetic fixes for chapter editing and previewing
  • fixed a glitch that would lead to wildly unrealistic wait times for invitation requests
  • improved handling of cookie errors
  • setting the posting date for a work to the future now doesn't silently uncheck the "Set a different publication date" ticky after preview

This edition of the release notes compiled by AD&T staffer mumble \0/.

Comment

Post Header

Published:
2011-02-06 09:43:08 -0500
Tags:

Thanks to the wonderful generosity of fandom, we're upgrading the servers for the AO3! Our original two servers are being joined by four more, bringing more storage space, more power and more speed, all paid for through fannish donations to the OTW. We think this calls for a celebration!

The Rails Twins: cartoon style image of servers

The Archive will have some downtime while we swap over to the new servers. We know that this will leave some of you twiddling your thumbs - we'd love it if you could harness some of your unused fannish energy to help us name the servers! We're looking for fitting fannish names which will celebrate the wonderful fannish community and creativity the servers will host.

Names, names, names

Meet the OTW 7! Cartoon-style pictures of our six servers and their trusty switch

We need names for our six servers and their trusty switch: check out Meet the Servers to find out more about them!

We want names which suit the machines and which reflect the fannish community they belong to: powerful, international, and brilliant! We'd like it if their names reflected the percentage of awesome women in fandom (although we think they have a whole variety of gender identities, just like fans).

How it will work

We'll have three periods of downtime while we install the servers - we'll be taking nominations for names during the first two, and we'll open voting during the third.

Nominations stage: 6 February from 18.00 UTC - 8 February 21.00 UTC

We invite all fans to submit the suggested names during this period! You can suggest just one name, or you can submit a full set of seven names (maybe with a theme!). Optionally, you can give a short explanation of why the name[s] would fit / where they come from. This would be particularly appreciated if the name is drawn from a less well-known source, particularly if it is a source not in English (we would LOVE some names from sources not in English and our nominations panel will be international, but sources in languages other than English are harder to research).

There are seven machines to be named- please let us know which machine you would like the name to go to. You can see their full details in Meet the Machines - in your entry please use the short names below:

  • DB
  • Rails1
  • Rails2
  • Original1
  • Original2
  • Storage
  • Switch

You can submit names in the following ways:

  • In the comments to our nominations posts on transformativeworks.org, LJ, DW, and IJ (coming soon).

  • Via Twitter @ao3org

  • Via our nominations webform (coming soon)

Nomination format

Nominations should be in the following format:

Name - Machine - Other optional comments / source

For example:

Elsie - DB - She was the best sister in 'What Katy Did', and the cleverest!

Shortlisting stage

A shortlisting panel made up of committee members from International Outreach, Accessibility, Design & Technology, Communications & DevMem will review the nominations and make up a shortlist. The shortlist will be based on the most-nominated names, but we will also give consideration to names which reflect under-represented areas of fandom.

Voting stage: 12 February from 9.00 UTC

During our second period of downtime, we'll post the list of shortlisted names on the OTW blog at transformativeworks.org and ask people to vote for their favourites. The seven names with the most votes will be our winners!

Announcements

The winning names will be announced by 14 February.

Prizes

The servers belong to fandom as a whole, and we hope that lots of people will join us in finding the right names for these fantastic machines. They are fandom's servers, and we think it's only right that fandom should name them.

The servers are the big prize, but we like giving out presents! We can't give goodies to everyone (alas), but every entry will be entered into a prize draw for lovely OTW goodies! Winners will be contacted through the same venue they submitted their entries, and will need to provide a valid postal name and address in order to claim their goodies.

Go forth and name!

We can't wait to see what names fandom comes up with! And once the servers have names of their own, it will be that much easier to create fanworks about them...

Comment

Post Header

Published:
2011-02-03 12:02:59 -0500
Tags:

As we may have mentioned a time or two, we’re lucky enough to have been able to purchase some shiny new servers for the Archive! You can read all about them at new server announcement post! This is great news for all our users, as it means more power and more possibilities in future.

In order to move over to the new servers and perform associated maintenance and code changes, we will have 3 periods of downtime:

We will send out an update on our Archive status Twitter account AO3_status before we take the site down, and again when we go back up again.

We know that many of you will miss us while we’re gone! To fill the time, we hope you’ll join in our Server Naming Festival! We’ll be posting more details of this on the OTW news blog at http://transformativeworks.org/ very soon.

Thanks for your patience while we perform these exciting upgrades to our system!

Love,

AD&T and everyone at the OTW!

Comment

Post Header

Published:
2011-02-01 06:50:08 -0500
Tags:

We held our first AD&T meting of the new term on 22nd of January! The meeting was chaired by Elz, who is co-chairing this term along with Amelia.

We welcomed a whole bunch of new members along with several returning staffers. We have people who've been on AD&T for four years, and others who only joined the OTW a couple of months ago. One of the things we want to try to do this year is give people slightly more defined roles within AD&T, so that we can make the best possible use of everybody's talents. We're excited to be bringing some new people and skillsets on board.

2010 reviewed

We looked at back at our achievements from 2010, during which we rolled out icons, metatags, a new tag wrangling interface, all new archive CSS, username editing, challenge signups, assignments and matching, archive skins, work skins, advanced search, downloads, video embeds, sharing code, and kudos, among other things, and upgraded to Ruby 1.9, Rails 3, Unicorn and Nginx. We're proud of what we achieved and we're looking forward to seeing what we can get done in 2011.

News from the hiatus

We discussed everything that happened over the break, including the way we managed the work associated with hosting the Yuletide challenge, what we did well and what we can learn for next year. Yuletide a lot smoother than 2009, but there are still some improvements to be made.

New servers!

We have new servers arriving soon! You can read more about them in our New servers announcement and Meet the Machines. We'll be moving over to the new servers next week, and we'd love you all to join in helping us name them! Watch this space for more news.

Changes to our coding process

We're planning to move our code versioning system from subversion to git. This will make it easier for new coders to join, easier for coders to keep going without being hindered by code freezes, and easier for testers to have a regular schedule. We're hoping to deploy our current release in the next week or so, and then we'll move over.

Other business

We also decided on a few design queries, to clear up some old issues that were no longer relevant and to improve the layout of kudos.

News from our sister and sub-committees

  • Coders are getting to grips with git in preparation for our move to the new system.
  • Testers are getting starting with the first round of testing for the year, and getting stuck into some new training.
  • Support have welcomed a bunch of new members and they are trying to catch up with answering ALL the tickets (there is a backlog from the hiatus - apologies if you have been waiting a little longer than usual for us to get back to you.
  • Tag wranglers have been reviewing the wrangling team and making sure that all the fandoms on the Archive have some wrangling love.

If there are things you'd like to do or say, please share them in comments, via the AO3 support and feedback form, by volunteering, or in whatever medium you feel comfortable with. Everyone is welcome to this party!

This meeting round-up by new AD&T staffer Cesy!

Comment

Post Header

Published:
2011-01-23 17:40:32 -0500
Translations:
Tags:

We're super-excited to announce that we've just taken delivery of the brand-new servers for the Archive of Our Own! \0/ Our new, vastly expanded server setup gives us more power, more memory, and more room for expansion, and we are THRILLED to be able to have them. They have been purchased with the generous support of fandom - thanks to all our awesome members and donors!

What we're buying

Check out Meet the Machines! for full details on our server family. Our original server setup had just two servers: a main database server and a backup. We're adding three more servers to this, plus a storage server and a switch, so our new setup will look like this:

Diagram showing server setup, with two database servers, two Rails servers, a static server, and a NAS server for backups, file hosting, etc. The servers communicate via a switch.

Money matters

We bought our servers from an awesome company iXSystems, who specialise in open source applications and were really responsive to our needs. They gave us a great deal: our DB server was US$5,554, and the Rails twins were US$4,193 each. The storage server was US$3,014, and the switch that lets them all talk to each other was US$280. In total we spent US$17,234 on new hardware, which is a great price for the kind of machines we've invested in.

Buying new servers also means paying more hosting costs - we own the machines, but we hire space for them with a colocation company who hook them up to the internet. When we had just two servers, we were paying US$228 per month for our 2U of rack space and bandwidth. With the new servers, we'll be paying US$800 per month for 8U of rack space plus extra bandwidth. Because our new servers are such powerful beasts, the company are running a brand new power cable just for us!

All of this investment was paid for by donations from fans! The AO3 is funded by donations to our parent org, the Organization for Transformative Works; the success of our last membership drive, which raised US$18,308.46, gave us the financial confidence to make this investment. Thank you to all our supporters!

If you'd like to support the ongoing development of the AO3 and the OTW, you can donate at any time. A donation of just US$10 makes you a member of the OTW (if you so desire) and confers voting rights in Board elections. Donations over US$50 also qualify for a variety of nommy premiums.

What this means for Archive users

More speed! More features! More fanworks! Once we're up and running with this setup, we'll be much better able to handle high loads, so you'll be seeing much less of our sad 502 page! We'll also be able to start thinking seriously about hosting multimedia fanworks - we still have work to do before we can start hosting fanart, but it's definitely in sight now! We'll also be able to start moving towards implementing Subscriptions on the Archive - one of our most-requested features.

Server installation: Archive downtime

In order to install our new servers and move to the new setup, we will have extended Archive downtime. We're still coordinating with our colocation company, but we're expecting to have two periods of downtime in the week beginning 30th January. All Archive user accounts will be emailed as soon as we know the exact timing (now is a good time to check that your registered email is still correct) and we'll be posting on our news blogs and to our Twitter accounts @ao3_status and @ao3org as more news arrives.

Server naming festival

These servers belong to fandom, so it's only right that fandom should get to name them! During our downtime, we'll be running a server naming festival and soliciting suggestions for names for our servers (and their trusty switch). Meet the Machines to find out what they are like and start thinking about what they should be called! More information on the competition coming soon!

SERVERS YAY!

We are EXCITED! Thank you, fandom!

Comment

Post Header

Published:
2011-01-23 17:25:58 -0500
Translations:
Tags:

Thanks to the wonderful generosity of fandom, we've been able to buy a beautiful new set of servers! Meet the machines below!

The DB Server - aka "The Beast"

The Beast: cartoon style image of server

Our new database server is a serious badass. Built for us by open-source server specialists iXSystems, the DB server is an iX1204 powered by 2 latest-generation Intel 6-Core X5650 processors, and 48GB of RAM. This server will also have 2 Intel X25-M 80GB SSDs (solid-state drives, which have no moving parts) to make reads off the database crazy fast.

The Rails Twins

The Rails Twins: cartoon style image of servers

A set of identical twins, our speedy and strong new Rails servers will split the load of running the Archive app. These two are from the same family as the DB server: iX1204 models, each with 2x Intel Quad Core E5620 processors, 24GB of RAM, and 4x146GB 15k RPM hard drives.

The Originals

Front end server: cartoon style image of server

Slave: cartoon style image of server

Our trusty veterans! The original servers are another set of identical twins: Hewlett Packard ProLiant DL360 G5 models each powered by 2 Quad-Core Intel Xeon E5420 processors. They each also have 16GB RAM, and 4×72GB 15k RPM hard drives. For the last year, these two have had to carry the entire load all by themselves, but now they will both be moving into new roles:

  1. One of these machines will now serve as our friendly memcache server and it runs background and other odd jobs.

  2. The other one will become the DB's slave. *koff* (Of course the more vanilla-minded among us can think of it as being the DB's loyal sidekick!) It will also run our search engine.

The Storage Server

Storage server: cartoon style image of server

The QNAP TS-809U-RP is a 2U rackmount Network Attached Storage (NAS) appliance, intended for what the manufacturer describes as "massive data sharing" -- mmmhmm! We're loading this baby to capacity, with 16TB (8x2TB Hitachi Deskstar 7200RPM HDDs) in hot-swap bays to give us greatly increased data storage/backup capability.

The Switch

Switch: cartoon style image of switch

All of our fabulous servers will communicate with one another through an HP Procurve V1910 Gigabit Layer 2+ smart-managed network switch. The switch has 16 auto-negotiating 10/100/1000 ports and 4 true Gigabit SFP ports.

Comment


Pages Navigation