Notaţia tablei de şah. Două modalităţi de etichetare independentă de orientare a liniilor şi coloanelor, prin poziţionare absolută faţă de tablă.

Constituim şi testăm o schemă ierarhică (implicând selectori imbricaţi) a proprietăţilor CSS dependente de set; obţinem printr-un program Bash, fragmentele CSS specifice seturilor de piese de şah. Adăugăm o opţiune de instanţiere cu un anumit set de piese.

Să spunem acum de unde putem obţine mai multe seturi de piese de şah şi să vedem cum realizăm printr-un program, sprite-urile corespunzătoare. Apoi, cum am putea face pentru ca poziţionările câmpurilor şi imaginilor să nu depindă totuşi, de setul curent folosit (şi nici de orientarea tablei).

Avem o imagine în care am reunit piesele de şah de o aceeaşi dimensiune n şi pe de altă parte, un câmp de dimensiune nxn. Problema este de a selecta din sprite-ul nostru o piesă şi a o poziţiona pe câmpul dat, încât definiţiile CSS necesare pentru aceasta să nu depindă de n. Investigăm cum să determinăm pentru acest caz, procentele necesare pentru background-position.

Proporţionăm din ce în ce mai fin procente pozitive… dar până la urmă ajungem la o soluţie neaşteptat de simplă, folosind procente negative!

Montăm piesele de şah într-un sprite şi-l folosim apoi în widget-ul care mapează poziţii FEN pe tabla de şah.