TAAT Technologie Cyfrowe

Ułamki na www

Wcześniej, czy później, nadchodzi taki dzień, w którym webmaster staje przed problemem wstawienia ułamków na stronę internetową. Niestety nie ma sprawdzonego, kompleksowego rozwiązania. Trzeba się uciec do kilku sprytnych zabiegów.

Naprościej wstawić znaki ułamków do kodu HTML za pomocą encji: ½ (½), ¼ (¼), ¾ (¾). Można użyć także odpowiedników — encji szesnastkowych, dziesiętnych lub znaków UNICODE, ale cokolwiek byśmy nie robili, tym sposobem możemy wstawić tylko podstawowe ułamki. Dodatkowo, użyta na stronie czcionka musi te znaki obsługiwać.

Zaletą takiego rozwiązania jest to, że wstawione tym sposobem ułamki wyglądają profesjonalnie. Ale jest też szereg wad, takich jak na przykład brak odmian grubych i półgrubych dla tych znaków. Największą wadą jest jednak to, że jest to rozwiązanie gotowe tylko dla kilku podstawowych ułamków. A co z pozostałymi?

Przy dużej ilości działań matematycznych, można od razu zacząć z grubej rury i użyć MathML. Ale przy kilku ułamkach wstawianych w tekst, wystarczy prostsze rozwiązanie: użycie CSS.

Pomysł jest prosty. Do wstawiania kreski ułamkowej służą encje ⁄ &#x2044, czyli znak UNICODE 8260 (⁄). Wystarczy za pomocą CSS odpowiednio ułożyć licznik i mianownik, rozdzielić je znakiem kreski ułamkowej i ułamek gotowy.

Potencjalne problemy mogą się pojawić dlatego, że w każdej czcionce te znaki mają inne proporcje, więc trzeba dostosować precyzyjny wygląd ułamków do danej czcionki, a na dodatek do odpowiedniego rozmiaru. W przypadku znaków mediewalowych, można się pokusić nawet o dostosowywanie położenia dla poszczególnych znaków. W sprawach typografii oczy są niezawodne, więc wszystkie rozmiary powinniśmy dobrać eksperymentalnie, oceniając końcowy efekt. Za podstawę eksperymentów można przyjąć 60% stopnia pisma dla licznika i mianownika i umieszczenie ich na wysokości 33% interlinii.

Przykład praktyczny

To jest ułamek trzy siódme: 3⁄7

Kod HTML:

To jest ułamek trzy siódme: <span class="fractup">3</span>

<span class="fractline">&#8260;</span>
<span class="fractdn">7</span>

Kod CSS dla kroju Arial:

.fractline, .fractup, .fractdn {
    font-family: arial, sans-serif;
    margin:0;
    padding:0;
}

.fractup, .fractdn {
    font-size: 0.55em;
    font-weight: 500;
    position:relative;
}

.fractdn {
    top:0em;
    left:0.1em;
}

.fractup {
    top:-0.6em;
    left:-0.1em;
}

Dowolne inne ułamki: