Sunday, June 14, 2009

Re-writing code of anime watch list

Although the newer version might appear identical to the previous version, the code used has been changed. The old code contain stuff like "tr" or "wbr" that I don't really understand. Also, the old table code might appear inwards on Gecko-based browsers (eg. Firefox), but appear normal on other browsers. There also was this mysterious gap between two images.

With code learn from the current versions of my story and the navigation menus, I decided to apply it here too. Using the trial-and-error method at the testing blog (to try something new and in the case something goes wrong), I managed to put this up.

Under the hood changes include:

  • Changing font colour codes: "white" and "black" became "#fff" and "#000" respectively.
  • Using CSS codes instead of HTML to create the border and background colour. (This seems to fix the problem)
  • Used stylesheet for the thumbnails as a background instead of as an image source.
  • The first column below the header of each set of tables are now merged and the text aligned to the right.
  • Table-within-a-table was used to create listing itself.
  • Since the image URLs are move to somewhere else, the codes are easier to work on.

Noticeable changes include:
  • Removal of "Current (...)" and "Upcomming (...)" and kept the words in prephansis.
  • Header text is now aligned to the left.
  • "Segoe UI" and "Myriad Pro" fonts are used for the English version, while "Meiryo" (メイリオ) and "VL PGothic" (VL Pゴシック) will be used for the Japanese versions. (Note: Segoe UI and Meiryo is included in Windows Vista or newer and recent versions of Microsoft Office/Live, Myriad Pro is included with Mac OS X and in a hidden folder of Adobe Reader. VL PGothic comes with OpenOffice.org, and is most likely to be included with recent versions of various Linux distributions if Japanese was installed as one of the display languages.)
  • Images for Umineko, Yoku, and Kobato are added.
  • "Ep" is replaced by "Currently at episode" and "Date" is replaced by "Commencing on"
Although not related, but happened shortly before the change, I had updated the dates of the anime and rearrange them by date. Haruhi and Hayate had swapped places as the former airs earlier.