Uzależnienie styli od dostępności krojów

Problem jest następujący: Wraz z nowymi wersjami Office’a i Windowsa pojawiły się nowe czcionki, takie jak np. Calibri. Istnieje pokusa by ich używać w internecie, ale problemem są wtedy użytkownicy którzy ich nie mają w systemie. Różne ciekawe czcionki instalują się zresztą również i z innymi programami (np. Corel Draw), nie mówiąc już o zupełnie innym zestawie czcionek na systemach Windows, Linux i MacOS.

CSS co prawda pozwala wymienić kilka alternatywnych czcionek. Wszystko byłoby super, gdyby można było w ten sposób zdefiniować dla każdej czcionki całą osobną definicję font:***. Tak jednak nie jest i pojawiają się problemy, gdy okazuje się, że np. kroje Calibri i Tahoma przy takim samym rozmiarze zdefiniowanym w arkuszu styli, na ekranie wcale nie są tej samej wielkości. Stąd też powstała konieczność zastosowania poniższej sztuczki.

Cały koncept opiera się na wykorzystaniu różnic w szerokości czcionek wchodzących w skład kroju. Skrypt JavaScript wywoływany w momencie załadowania się dokumentu tworzy nową warstwę. Ponieważ aby przeglądarka zwracała jej szerokość (zależną od zawartości, czyli de facto od czcionek) musi być ona widoczna, a nie chcemy pokazywać użytkownikowi mrugających literek, więc umieszczamy ją poza lewym górnym rogiem okna. Warstwa zostaje wypełniona całym angielskim alfabetem, co w połączeniu z dużym rozmiarem czcionki powinno wyeliminować pomyłki. Jako krój neutralny, z którego szerokością porównujemy inne, został wybrany Arial/Helvetica. Podyktowane jest to tym, że czcionki te są na każdym współczesnym komputerze, a co ważniejsze zwykle nie są używane jako substytuty innych (bo już np. użycie Couriera wywołuje problemy z wykrywaniem czcionki DejaVu Monospace na Linuksie). W ten sposób nie blokujemy sobie możliwości wykrywania czcionek które mogły by funkcjonować jako substytut czcionki obranej za neutralną.

Do działania całości potrzeba nam jeszcze stylów zależnych od czcionek. Osiągamy to dodając do elementu <body> nazw klas takich jak nazwy użytych czcionek. Czy może raczej: pierwszej czcionki w definicji, aby możliwym było sprawdzenie czy jest zainstalowana jakaś czcionka spośród kilku, tak jak wymienia się kilka alternatyw w stylu font-family:***.

Po tym przydługim wstępie przejdźmy wreszcie do kodów skryptu:

function checkFonts(fonts) {
	fonts = fonts.split(';');
	// Poniższa linijka wykorzystuje bibliotekę Prototype,
	// więc musi ona zostać dołączona nim funkcja zostanie wywołana.

	var tester = new Element('div', {
		style: 'position:absolute; left:-500px; top:-200px; font-size:60px'
	});
	tester.update('abcdefghijklmnopqrstuvwxyz');
	var arial_family = 'Arial,Helvetica,sans-serif';
	tester.style.fontFamily = arial_family;
	document.body.appendChild(tester);

	var arial = tester.clientWidth;
	for (var i=0; i<fonts.length; ++i) {
		tester.style.fontFamily = '"' + fonts[i] + '",' + arial_family;
		if (tester.clientWidth != arial)
			document.body.addClassName(
				fonts[i].split(',')[0].replace(' ', '_')
			);
	}
}

function onload() {
	checkFonts('Calibri;Candara');
}

Oraz arkusza styli:

p {
	font-family: 'Lucida Sans Unicode',Tahoma,sans-serif;
	font-size: 90%;
}

.Calibri p {
	font-size: 100%;
	font-family: Calibri;
}
.Calibri.Candara b {
	font-family: Candara;
}
Ten wpis został opublikowany w kategorii Informatyka i oznaczony tagami , , . Dodaj zakładkę do bezpośredniego odnośnika.

Możliwość komentowania jest wyłączona.