gevans Posted June 23, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/ Share on other sites More sharing options...
JonnoTheDev Posted June 23, 2009 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862077 Share on other sites More sharing options...
gevans Posted June 23, 2009 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862080 Share on other sites More sharing options...
gevans Posted June 23, 2009 Author Share Posted June 23, 2009 Update: The font list now apeeares when the text input has focus. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862097 Share on other sites More sharing options...
ldb358 Posted June 23, 2009 Share Posted June 23, 2009 thats really cool expecally if your looking for a certain font for a site really cool idea. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862184 Share on other sites More sharing options...
gevans Posted June 23, 2009 Author Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862203 Share on other sites More sharing options...
gevans Posted June 23, 2009 Author Share Posted June 23, 2009 Update: Color Picker in place Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862239 Share on other sites More sharing options...
947740 Posted June 24, 2009 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862795 Share on other sites More sharing options...
947740 Posted June 24, 2009 Share Posted June 24, 2009 But other than that, I think it is pretty awesome. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862824 Share on other sites More sharing options...
gevans Posted June 24, 2009 Author Share Posted 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! Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-862858 Share on other sites More sharing options...
darkfreaks Posted June 24, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-863009 Share on other sites More sharing options...
chmpdog Posted June 25, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-863110 Share on other sites More sharing options...
gevans Posted June 25, 2009 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-863239 Share on other sites More sharing options...
chmpdog Posted June 25, 2009 Share Posted June 25, 2009 oh ok. then it is a really cool script Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-863369 Share on other sites More sharing options...
gevans Posted June 25, 2009 Author Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-863371 Share on other sites More sharing options...
gevans Posted June 25, 2009 Author Share Posted June 25, 2009 Update: Very basic css file downloader in place. Does what it needs to do at the moment! Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-863467 Share on other sites More sharing options...
darkfreaks Posted July 4, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-868952 Share on other sites More sharing options...
gevans Posted July 5, 2009 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869222 Share on other sites More sharing options...
darkfreaks Posted July 5, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869412 Share on other sites More sharing options...
darkfreaks Posted July 5, 2009 Share Posted July 5, 2009 why not just use HTMLTIDY option on the validation i linked to , to output the html so its in compliance? Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869428 Share on other sites More sharing options...
gevans Posted July 5, 2009 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869471 Share on other sites More sharing options...
darkfreaks Posted July 6, 2009 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869486 Share on other sites More sharing options...
gevans Posted July 6, 2009 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869627 Share on other sites More sharing options...
darkfreaks Posted July 6, 2009 Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869809 Share on other sites More sharing options...
gevans Posted July 6, 2009 Author Share Posted July 6, 2009 ROFL, thanks.... Slightly pointless though. AS mentioned; Brand new design, Differenlt layout. Probably will never touch the above page again. Link to comment https://forums.phpfreaks.com/topic/163385-font-tester/#findComment-869821 Share on other sites More sharing options...
Recommended Posts