• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • Last Modified:

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.
0
chrisvee
Asked:
chrisvee
1 Solution
 
Julian HansenCommented:
Where do you want to display it - in what format? List, free form text, dropdown select?
0
 
RobOwner (Aidellio)Commented:
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?
0
 
chrisveeAuthor Commented:
in browser. Just Text. no need any thing fancy like dropdown.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
chrisveeAuthor Commented:
@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
0
 
Michel PlungjanIT ExpertCommented:
Note you cannot perform a document.write after the page has loaded and rendered. It will wipe the page completely

http://jsfiddle.net/mplungjan/TwDdt/

<div id="output"></div>

window.onload=function() {
    document.getElementById("output").innerHTML=Detector.getFontList();
}

Result on my box

cursive,monospace,serif,sans-serif,fantasy,default,Arial,Arial Black,Arial Narrow,Book Antiqua,Bookman Old Style,Calibri,Century,Century Gothic,Comic Sans MS,Consolas,Courier,Courier New,Garamond,Georgia,Helvetica,Impact,Jokerman,Latha,Lucida Console,Magneto,Mistral,Monotype Corsiva,Onyx,Palatino Linotype,Parchment,Playbill,Shruti,Tahoma,Trebuchet MS,Verdana
0
 
chrisveeAuthor Commented:
how to send those font list to database (php/mysql)  through javascript ?
0
 
Michel PlungjanIT ExpertCommented:
Using jQuery and ajax:


$(function() {
    $.post("whichfonts.php?fonts="+encodeURI(Detector.getFontList()),function(data){
      alert('Font list sent to server');
    });
});
0
 
chrisveeAuthor Commented:
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']  ?
0
 
Michel PlungjanIT ExpertCommented:
Yes, why not try?
0
 
Michel PlungjanIT ExpertCommented:
Not sure if what your are doing with the "s" var
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now