Uživatelská změna písma

V rubrice: Tipy & Triky | Obtížnost:

Dnes si ukážeme vychytávku pro vaše webové stránky, která se dá použít nejen ve WordPressu. Určitě jste již mnohokrát přemýšleli, které písmo je nejvhodnější pro čtení na webu. Někteří by se rvali za patkové, jiní by život položili za bezpatkové. Jediné na čem se snad frontoví bojovníci mohou shodnout je rázné ne Comic Sansu. Za něj z vás servou kůži, ať už má jakoukoliv barvu.

Pokud podobné dilema nechcete řešit, nabídněte svému návštěvníkovi svobodnou volbu ohledně toho, v jakém písmu budou váš web číst. Nejdříve si vytvoříme select, pomocí které bude možné font měnit.

<select id='pismak' name="pisma" onChange="pismo(this.options[this.selectedIndex].value)">
<option value="Times new Roman">Times new Roman</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Verdana">Verdana</option>
<option value="Courier New">Courier New</option>
<option value="Trebuchet MS">Trebuchet MS</option>
</select>

Jakou paletu písem zvolíte je už jen na vás. Nyní je třeba připravit javascriptový kód, který bude písmo měnit a také ukládat jeho výběr do koláčků, aby si ho návštěvník nemusel na každé stránce nastavovat znova. První tedy kód s koláčky:

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
		}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
	}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

Tyto funkce nám umožní jednoduše číst a ukládat koláčky. Nyní už samotný kód, který mění písmo na stránce.

function pismo(el){
	if(el != ""){
		document.getElementById("text").style.fontFamily=el;
		createCookie('text', el, '14');
	}
}

function kolace(){
	r = readCookie('text');
	pismo(r);
	opt=0;
	switch (r){
		case "Times new Roman":opt=0;break;
		case "Arial":opt=1;break;
		case "Georgia":opt=2;break;
		case "Verdana":opt=3;break;
		case "Courier New":opt=4;break;
		case "Trebuchet MS":opt=5;break;
		}
	document.getElementById("pismak").options[opt].selected='selected';
	}

Samotný styl písma se mění pouze v oddílu, jehož id je text. Pro správnou funkci tudíž musíte tuto část přizpůsobit svému webu. Další měnitelnou položkou je switch s písmy. Zde opět je na vás upravit si blok podle toho, která písma chcete na webu zobrazovat Vy. Aby se vám uživatelské písmo načetlo z koláčku je třeba ještě upravit tag body na:

<body onLoad='kolace()'>

A nyní už praktická ukázka.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
V rubrice: Tipy & Triky | Obtížnost: