Font Tester

gevans · June 23, 2009

Hey guys,

This is just a little code I'm writting to help my designer test web fonts. At the moment you can add your own text, change the font-family, set as bold and italic. You can also just write your own font into the input field.

You preview it all in the browser.

I'm also going to implement a css file download so it writes the styles you've set to file for you.

Nothing special, just something that's coming along nicely.

It requires javascript to work, and the work done so far can be seen here;

http://projects.purplecoffee.co.uk/styler/

If any designers have a look, would you find something like this useful, and would you use it?

Cheers

JonnoTheDev · June 23, 2009

Quite funky. I would say it was useful, however you must already know the name of the font to search in your text field. Would be nice if you had a select list so you could try out fonts without searching.

gevans · June 23, 2009

I'm working on that at the moment, the list is going to show automatically when the input has focus.

Going to add a few vairables, font color, background color, font size. Just easy stuff that is useful to test quickly.

gevans · June 23, 2009

Update: The font list now apeeares when the text input has focus.

ldb358 · June 23, 2009

thats really cool expecally if your looking for a certain font for a site really cool idea.

gevans · June 23, 2009

My designer will be styling it up nicely once I'm done, but for now it's just going to look rough!!

Just added a font-size slider

Cheers ldb358

gevans · June 23, 2009

Update: Color Picker in place

June 24, 2009

Not really an issue, but in IE7, the drop down list for the fonts is actually underneath the scrollers for font size and line height.

June 24, 2009

But other than that, I think it is pretty awesome.

gevans · June 24, 2009

Ahhhh, I haven't done any IE testing yet, as we're currently making a design for it. Forgot to mention that it's just everything gettign shove in, it will be styled soon!

darkfreaks · June 24, 2009

while you're at it might want to validate your javascript through javascript lint or jslint.com. so it is compatible with most broswers including MSIE

chmpdog · June 25, 2009

in my browser I keep needing to scroll down to see the changes I would recommend having the text in an easy to see location

gevans · June 25, 2009

Forgot to mention that it's just everything gettign shove in, it will be styled soon!

The layout will be more user friendly once it has a design. I just made everything big and spaced out for the test.

chmpdog · June 25, 2009

oh ok. then it is a really cool script

gevans · June 25, 2009

Cheers, doing some work on a css file download for it at the mo, I'll post when there's more functionality

gevans · June 25, 2009

Update: Very basic css file downloader in place. Does what it needs to do at the moment!

darkfreaks · July 4, 2009

1.) Make sure your HTML is HTML 4.0.1 Transitional

2.) Make sure your CSS is CSS 2.1/3 Valid

3.) Debug your JavaScript with Jslint and JavaScript lint

gevans · July 5, 2009

I use an XHTML 1.0 Strict doctype, not HTML 4.0.1 and it's being put into a proper design now which I'm validating as I go.

The only invalid CSS is put in place by a jquery stylesheet for the sliders, but the slider will not be using that setting in the final design so the CSS will valid.

The javascript is being re-built for the final design, but I've never debugged javascript as I've always found if it works it works, thought it hasnt been cross browser tested yet.

darkfreaks · July 5, 2009

Ive tested your javascript for MSIE 5.5 and i get an error.

MSIE 5.5:Error: object does not support this property or method on line 20 character 9837

Invalid CSS:

.ui-corner-all-small Property -moz-border-radius doesn't exist : 0

.ui-corner-all-small Property -webkit-border-radius doesn't exist : 0

ui-corner-all-big Property -moz-border-radius doesn't exist : 0

.ui-corner-all-big Property -webkit-border-radius doesn't exist : 0

darkfreaks · July 5, 2009

why not just use HTMLTIDY option on the validation i linked to , to output the html so its in compliance?

gevans · July 5, 2009

I don't build sites to support IE5.5, I don't go any further back than IE6 (personal choice).

Yes, I know what's causing the css issue, and as I said those settings wont be in place in the final build.

I find it very easi to comply to standards when I go through my final code tidying processes so don't use anything like HTMLTIDY. And the page you see is an alpha version of the site. I'm working on the beta version at the moment which will encompass the full design and functionality, as well as compliancies.

I'll post up new info when the beta version is online at a finalised location. Thanks for looking.

darkfreaks · July 6, 2009

I tested on browsershots.org and accidentally canceled the test but it doesn't show at all on Dillo 0.8.6 with flash and JavaScript disabled.

gevans · July 6, 2009

There's a warning, it will never work without javascript. It's a dependancy of the site. A decision we had to go with in the planning stage.

darkfreaks · July 6, 2009

Re-validated as XHTML 1.0 Transitional:

   <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /><!-- META DATA -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Test Page" />
<meta name="keywords" content="{KEYWORDS}" />
<meta name="description" content="{DESCRIPTION}" />
<meta name="robots" content="index, follow" />
<meta name="GOOGLEBOT" content="INDEX, FOLLOW" />
<meta name="author" content="Purple Coffee Interactive" />
<meta name="language" content="english" /><!-- FAVICON -->
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" /><!-- STYLESHEETS -->

<style type="text/css" media="screen">
                                /* <![CDATA[ */
                                @import url(css/default.css);
                                @import url(css/ui-slider.css);
                                @import url(css/colorpicker.css);
                                /* ]]> */
</style>
<!--[if lte IE 7]>
                                <link rel="stylesheet" type="text/css" href="css/IE/IE.css" />
                        <![endif]-->
<!--[if IE 6]>
                                <link rel="stylesheet" type="text/css" href="css/IE/IE6.css" />
                        <![endif]-->
<!-- JAVASCRIPT FILES -->

<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript" src="js/ui-core.js">
</script>
<script type="text/javascript" src="js/ui-slider.js">
</script>
<script type="text/javascript" src="js/colorpicker.js">
</script>
<script type="text/javascript" src="js/styler.js">
</script>
<script type="text/javascript" src="js/downloader.js">
</script>
<title>Style Maker</title>

<style type="text/css">
/*<![CDATA[*/
div.c3 {background-color: #fff}
div.c2 {background-color: #555555}
input.c1 {border:0;}
/*]]>*/
</style>
</head>
<body>
<noscript>This page need JavaScript turned on</noscript>
<h1>Style Maker</h1>
<div><br />
<br />
<input class="m-pointer" type="text" name="font" id="font" value="Arial, Helvetica, sans-serif" /><!-- <strong><span class="m-pointer" id="font-submit">APPLY FONT</span></strong><br />-->
<div id="font-find"></div>
<br />
<br />
<input type="checkbox" name="bold" /> - <span class="bold">Bold</span><br />
<input type="checkbox" name="italic" /> - <span class="italic">Italic</span><br />
<br />
<span>Font Size</span> - <input type="text" id="fontSize" class="c1" />
<div id="fontSizeSlider"></div>
<br />
<br />
<span>Line Height</span> - <input type="text" id="lineHeight" class="c1" />
<div id="lineHeightSlider"></div>
<br />
<br />
<div id="text-align-holder">
<div class="left text-align m-pointer live text-align-but" id="text-left"></div>
<div class="left text-align m-pointer text-align-but" id="text-center"></div>
<div class="left text-align m-pointer text-align-but" id="text-right"></div>
<div class="left text-align m-pointer text-align-but" id="text-justified"></div>
<div class="clearfix"></div>
</div>
<br />
<br />
<br />
<div class="left">Font Color: <br />
<span id="fontColor">#222222</span> </div>
<div class="left c2" id="fontColorSelector"></div>
<div class="clearfix"></div>
<br />
<br />
<br />
<div class="left">Background Color: <br />
<span id="bgColor">#ffffff</span> </div>
<div class="left c3" id="bgColorSelector"></div>
<div class="clearfix"></div>
</div>
<div id="text">Enter Test Here</div>
<br />
<br />
<div><span class="m-pointer" id="download_css">Download File</span></div>
</body>
</html>

gevans · July 6, 2009

ROFL, thanks....

Slightly pointless though. AS mentioned;

Brand new design,

Differenlt layout.

Probably will never touch the above page again.

Sign In

Font Tester

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Important Information