asked on

font detection through javascript

here is the code for detecting installed fonts available to a browser though javascript,css method.(no flash)

var Detector =
{
    init: function()
    {
        this.h = document.getElementsByTagName("BODY")[0];
        this.d = document.createElement("DIV");
        this.s = document.createElement("SPAN");
        this.d.appendChild(this.s);
        this.d.style.fontFamily = "sans";
        this.s.style.fontFamily = "sans";
        this.s.style.fontSize = "72px";
        this.s.innerHTML = "mmmmmmmmmmlil";
        this.h.appendChild(this.d);
        this.defaultWidth = this.s.offsetWidth;
        this.defaultHeight = this.s.offsetHeight;
        this.h.removeChild(this.d)
    },
    test: function(a)
    {
        this.h.appendChild(this.d);
        var b = [];
        b.name = this.s.style.fontFamily = a;
        b.width = this.s.offsetWidth;
        b.height = this.s.offsetHeight;
        this.h.removeChild(this.d);
        a = a.toLowerCase();
        if (a == "serif") {
            b.found = true
        } else {
            b.found = (b.width != this.defaultWidth || b.height != this.defaultHeight)
        }
        return b
    },
    getFontList: function()
    {
        this.init();
        var a = ["cursive", "monospace", "serif", "sans-serif", "fantasy", "default", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold", "Book Antiqua", "Bookman Old Style", "Bradley Hand ITC", "Bodoni MT", "Calibri", "Century", "Century Gothic", "Casual", "Comic Sans MS", "Consolas", "Copperplate Gothic Bold", "Courier", "Courier New", "English Text MT", "Felix Titling", "Futura", "Garamond", "Geneva", "Georgia", "Gentium", "Haettenschweiler", "Helvetica", "Impact", "Jokerman", "King", "Kootenay", "Latha", "Liberation Serif", "Lucida Console", "Lalit", "Lucida Grande", "Magneto", "Mistral", "Modena", "Monotype Corsiva", "MV Boli", "OCR A Extended", "Onyx", "Palatino Linotype", "Papyrus", "Parchment", "Pericles", "Playbill", "Segoe Print", "Shruti", "Tahoma", "TeX", "Times", "Times New Roman", "Trebuchet MS", "Verdana", "Verona"];
        var c = "";
        for (i = 0; i < a.length; ++i) {
            var b = this.test(a[i]);
            if (b.found) {
                c += b.name + ","
            }
        }
        return c.slice(0, - 1)
    }
};

Open in new window

Please help me how to document.write() to Display Fonts list.

Julian Hansen

Where do you want to display it - in what format? List, free form text, dropdown select?

Rob

That's not code for detecting fonts on a computer. It compares the fonts width listed in the code against "sans". Not only would it be incomplete but its not 100% accurate.
What are you trying to achieve by this?

chrisvee

ASKER

in browser. Just Text. no need any thing fancy like dropdown.

chrisvee

ASKER

@tagit Actually flash solution works fine. But it wont work in mobiles. the code i posted above is modified from http://lalit.org/lab/javascript-css-font-detect

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chrisvee

ASKER

how to send those font list to database (php/mysql) through javascript ?

Michel Plungjan

Using jQuery and ajax:

$(function() {
$.post("whichfonts.php?fonts="+encodeURI(Detector.getFontList()),function(data){
alert('Font list sent to server');
});
});

chrisvee

ASKER

i implemented javascript with ajax.please check mistakes.

function send(s){
	s = s.toString(" ");

	send = "f="+encodeURIComponent(Detector.getFontList());
	ajax("page.php",send);
}

function ajax(url, send){
	var ar = null;
	try{
		ar=new XMLHttpRequest();
	}catch(e){
		if(window.ActiveXObject){
			var ax=['Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'],i=ax.length;
			while(--i){
				try{
					ar=new ActiveXObject(ax[i]);
					break;
				}catch(e){
				}
			}
		}
		if(ar==null){
			alert("Update your browser.");
		}
	}
	ar.open("POST",url,true);
	ar.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ar.onreadystatechange=function(){
		if(ar.readyState==4){
			if(ar.status==200||ar.status==304){
				document.body.innerHTML=ar.responseText.replace(/\n/g, "<br>");
			};
		}
	}
	ar.send(send);
};

Open in new window

in php file, can i use $_POST['f'] ?

Michel Plungjan

Yes, why not try?

Michel Plungjan

Not sure if what your are doing with the "s" var