Danbooru

Standardized class styles for translators

Posted under Bugs & Features

Lefkadios

The typesetting of translations on Danbooru is an example of a good (or at least forgivable) use case of inline styles. However, certain boilerplate gets really tedious and error-prone to type. This could easily be solved with CSS applied to classes reserved for translator use, with custom properties to tweak their behavior. For example:

/* For changing the background color of a non-embedded note */
.note-body :not(.embedded) > .bg-fill {
  padding: 4px;
  margin: -4px;
}

/* In eternal lieu of text-stroke */
.note-body > .text-outline {
  --text-outline-width: 1px;
  --text-outline-blur: 0px;
  --text-outline-color: #FFF;
  text-shadow:
    calc(-1 * var(--text-outline-width)) 0px var(--text-outline-blur) var(--text-outline-color),
    var(--text-outline-width) 0px var(--text-outline-blur) var(--text-outline-color),
    0px var(--text-outline-width) var(--text-outline-blur) var(--text-outline-color),
    0px calc(-1 * var(--text-outline-width)) var(--text-outline-blur) var(--text-outline-color),
    var(--text-outline-width) var(--text-outline-width) var(--text-outline-blur) var(--text-outline-color),
    calc(-1 * var(--text-outline-width)) calc(-1 * var(--text-outline-width)) var(--text-outline-blur) var(--text-outline-color),
    calc(-1 * var(--text-outline-width)) var(--text-outline-width) var(--text-outline-blur) var(--text-outline-color),
    var(--text-outline-width) calc(-1 * var(--text-outline-width)) var(--text-outline-blur) var(--text-outline-color);
}
Reply
BrokenEagle98

Yeah, having classes for translators has been discussed before. There wasn't a lot of traction with other translators though, plus no issue was ever created on GitHub, so the idea was pretty much forgotten. I'd be in favor of such though, as I find that I often have to keep a Notepad window up with all of my boilerplate CSS and HTML for quick copy/paste.

Reply
1