Dozerfleet Rating System/How to create MPAA-style ratings

For the sake of showing DRS rating equivalents, this site also includes a template for showing or guessing approximate MPAA film ratings, in a style imitating the official layout for the MPAA.

This could also be used for spoof ratings, such as:

If you run a wiki related to documenting major motion pictures that have received MPAA ratings, you can copy the source code provided here to render quality imitation fields that eliminate the need for image file storage.

Caution: Use this sparingly, and only in areas where appropriate. Bear in mind this code produces only a close approximation / imitation of the official images for the MPAA's rating symbols. Respect for trademarks matters, so fair use should be a priority.

Other notes Times New Roman fonts are used with this widget. Keep in mind that if you are viewing this page from a mobile phone, your phone may or may not have that typeface installed. Research your mobile device to learn how to implement use of additional fonts, if possible. DRS uses the Impact font, which may have similar rendering problems if your device does not have it installed.

MediaWiki code
Copy this code to a template of your own making on your wiki:



CSS
To make a resource-dependent HTML of this imitation-MPAA, start by making a CSS file with the following code:

div.mpaa-rating { margin-top:20px; padding:3px; display:inline; border-radius:0!important; font-family:Times New Roman; font-weight:bold; font-size:200%; /*-- <-- Modify this according to your site's specific needs--*/ border:2px solid black; }

White-on-black version
.mpaa-wob { border:2px solid white!important; color:white; background:black; }

HTML
The HTML should reference the CSS, and would work like this for a white-text-on-black render:

(Insert rating here)

Pros and cons

 * Using this code method eliminates the need to use trademarked image files, though respect for trademarks should be honored within fair use as much as possible.
 * This method takes up significantly fewer resources than images.

Cons

 * Basic understanding of the code required, especially for custom scaling.
 * At the time of this tutorial being written, font anti-aliasing for Times New Roman font doesn't work on Windows running Firefox. You can customize the code to add a text-shadow in the mean time.
 * Times New Roman font may not render properly on all mobile phone platforms, especially older Motorola models.