Dozerfleet rating system/How to convert the DRS template to HTML

The following is a guide on how to convert the DRS templates on this wiki into an HTML widget that is resource-dependent on a CSS file, for use of the DRS on non-wiki sites and on wikis that don't use MediaWiki syntax.

CSS
Here's how to make an HTML/CSS resource-dependent implementation for DRS in plain, plain-with-border, white-on-black, and gold-on-black.

We'll start by storing the CSS data inside a separate file dubbed "drsratings.css":

Main DIV CSS
The following defines the style data for DRS labels:

div.drs { margin-top:10px; padding:5px; font-size:; display:inline; border-radius:0!important; font-family:Impact,Arial; }

span.arrow { font-size:120%; }

Limit the width to 32 pixels
.drs-width-control { width:32px; }

White-on-black class with white frame
.drs-wob { background:black; color:white; border:2px solid white; }

Black-on-transparent with black border
.drs-bwb { border:2px solid black; }

Gold-on-black with gold border
.drs-gob { background:black; color:gold; border:2px solid gold; }

Using a similar scheme, you can define custom classes based on personal needs.

HTML
To reference the above implied CSS file, your HTML should include in its head:

@import url('drsratings.css');

Customize the URL import setting according to the CSS file's exact location.

Example of a 32-pixel gold-on-black of 13-Up
Note: On your HTML page, you may wish to give the widget a  style based on your specific scaling needs.

13 &uarr;

Cons of MediaWiki
The inclusion of special entity arrows for the 3-Down, 6-Up, 13-Up, and 16-Up ratings creates various problems with defining styles in a MediaWiki environment. Dividing the template into six separate templates averts the need to make significant changes to Common.css.

Pros of MediaWiki
On the plus side, the MediaWiki approach allows for templates to include swappable parameter values. Because of this, setting certain CSS values as swappable values eliminates the need to define arrays of custom classes. Style values can be decided on-the-fly at the local level.

Non-MediaWiki
In a non-MediaWiki coding environment such as a basic HTML/CSS page development scheme, multiple classes would need to be defined. However, this means that classes could be swapped out on the fly based on prior definitions for whatever the HTML widget requires. Because of this, the HTML widget is a simple template in which the arrows for Up and Down DRS can be copy-pasted or removed based on need. With DHTML, it is possible that a custom class could be assigned to either show or hide the arrow depending on specifics of need. This is trickier to do (and unnecessary) in MediaWiki.

The use of arrow special character entities, however, is the reason why there is so much complexity to DRS coding in the first place. This is the reason that for many years, DRS relied on GIF files rather than code to render the rating symbols. Other rating systems that don't use the arrows are infinitely easier to code, eliminating the need for images.