<?php if (FILEGEN != 1) die;
// styler for font face.  set by css
// writes styles for:
class style_font extends style_base {
    private $initstring;

    function __construct($initstring) {
        if ($initstring == "")
            $initstring="basic_sans_serif";        // default
        $this->initstring=$initstring;
    }

    static function isRequired($html) {
        $retval= False === array_search($html,array("body","div","img","hr"));
        return $retval;
    }

    private function getStackString($stackname) {
        $stacks=array(
            "arial"=>"Arial",
            "verdana"=>"Verdana,DejaVu Sans",
            "times"=>"Times,Times New Roman,Nimbus Roman No9 L",
            "arial_black"=>"Arial Black,Arial",
            "impact"=>"Impact,DejaVu Sans Condensed",
            "arial_narrow"=>"Arial Narrow,DejaVu Sans Condensed",
            "courier"=>"Courier,Courier New,DejaVu Sans Mono",
            "palatino"=>"Palatino Linotype,Baskerville,Georgia,Century Schoolbook L,Times,Times New Roman",
            // last one:
            "basic_sans_serif"=>"Microsoft Sans Serif,Monaco,DejaVu Sans,Nimbus Sans L"
        );
        if (!isset($stacks[$stackname]))
            throw new exception("unknown font stack name:  $stackname");
        return $stacks[$stackname];
    }

    public function cssOutput($js) {
        $stackstring=$this->getStackString($this->initstring);
        return array("font-family",$stackstring);
    }
}
?>

Font Styler

The web pages on the system I developed write their own css files based on my own design of styling input. One place where this comes in handy is in designing 'font stacks'. You can look at the great work by code style on fonts and their relative prevalence to see which font stacks are likely to actually work out in the jungle. Once you've done that, why reinvent the wheel?

In my own formatting files, I just specify 'courier' (or 'verdana') and the font styler automatically fills it out with the best stack I've worked out. The best part is, if I want to add stacks (or some great new fonts become very prevalent) or even improve my old work, my existing sites are all along for the ride.

You can also probably infer how I did all the styling by looking at this one case. It's fairly object-oriented, but I'm not a fanatic about object oriented programming unless the people I work for are.

// this function returns a qualified href.
public function hrefPrep($href,$bLink=False,$page="",$bDoEncode=True) {
    global $qq;
    // longname addresses are marked with two ##. translate them into short names
    if (preg_match('/^([^#]*)##([^\\/]+)(.*)$/',$href,$matches)) {
        $pagename=$matches[1];
        // because users can type in these hrefs, silently ignore the errors.
        try {
            $short=$this->htmlShortFromLong($matches[2],$pagename);
            $href=preg_replace('/^([^#]*)##([^\\/]+)(.*)$/','$1#'.$short.'$3',$href);
        } catch (Exception $e) {
            // just strip out the in-page marker
            $href=preg_replace('/^([^#]*)##([^\\/]+)(.*)$/','$1$3',$href);
        }
    } else
        $pagename=$href;

    // check to see if this is an absolute url.  in the first case, look for more than one dot.
    if (False !== ($i=strpos($href,'.')) && False !== strpos($href,'.',$i+1)) {
        // this contains something like www.example.com  if it doesn't have the RFC flags, add them:
        if (!filter_var($href,FILTER_VALIDATE_URL,FILTER_FLAG_SCHEME_REQUIRED))
            $href='http://'.$href;
        // don't touch this one:
        return $href;
    }

    if (substr($href,0,1) == "/" || filter_var($href,FILTER_VALIDATE_URL,FILTER_FLAG_SCHEME_REQUIRED))
        return $href;

    if ($bDoEncode && isset($this->encodedPages[$pagename])) {
        // encoded pages require a pagename.  no plain #
        if ($pagename == '') {
            if ($page == "") {
                if (isset($this->registerpage)) {
                    $page=$this->registerpage;
                } else if (isset($this->outputpage)) {
                    $page=$this->outputpage;
                } else
                    throw new exception("no context for link fix of html id: $longname");
            }
            $pagename=$page;
        }
        if ($qq['production'])
            $encoding='https://'.$qq['domain'];
        else
            $encoding='HTTP://LOCALHOST';
    } else
        $encoding='';
    $prefix=$pagename != '' ? ($bLink ? $qq['hrefbase'] : $qq['srcbase']) : '';

    return $encoding.$prefix.$href;
}

href Preprocessor

One of the major pains in web design is keeping up with hrefs. When sites are in different locations, they need different things prepended to them. What's more, secure web pages need to have 'https:~/~/' prepended to them, along with a fully qualified url, which greatly reduces the utility of relative hrefs supported by most browsers.

Every href that my system puts out gets run through this routine. It allows me to maintain my sites in a development environment (where several sites share the same code but have resources in different directories) and a production environment. This has especially useful in 'preproduction' where the client can look at the site but where the domain name is not yet pointing there. All it takes is a change in one config file and the .htaccess file.

// technically does not set height, but makes one child relative so parent's height
//   will be calculated automatically from greater of two absolutely positioned children
// DEPENDENCIES:  object y, object height
//-!heightFrom2Children
//-:longname longname item to manipulate
//-:object1 object1 ... to tie to
//-:object2 object2 ... to tie to
//-<jquery.js
function () {
    if ($("#<#object1#>").height() > $("#<#object2#>").height()) {
        // if we're changing height of parent, we need to recalculate sizes
        if ($("#<#object1#>").css("position") == "absolute") {
            $("#<#object1#>").css("position","relative");
            calcpos();
        }
        $("#<#object2#>").css("position","absolute");
    } else {
        if ($("#<#object2#>").css("position") == "absolute") {
            $("#<#object2#>").css("position","relative");
            calcpos();
        }
        $("#<#object1#>").css("position","absolute");
    }
}//-}

Javascript Positioning Snippet

In the files I use to format a page, I'm not limited to static css specifications when Javascript is available. In those cases, I can specify, for example, to tie a decorative div containing a shadow to the right side of another div. This cuts down a whole lot on design ugliness in layouts. (Generally, when Javascript is not available my sites are designed to degrade into a safe format. Because my sites so far have not been real high volume, I haven't bothered testing this extensively yet, but I'll get around to it!)

This code sample is one 'snippet' used in dynamic layouts. This particular one implements the well known Inman column clearing trick.

You can also observe how, generally, I handled javascript in my system. Virtually all (but not absolutely all!) javascript is either in a library or in a 'snippet' file. The snippets allow me to do simple text parameter substitution, specify library dependencies, and do some simple re-use. I use specially formatted comments to read the snippet files, so that I can run them through jslint before using them. This has saved me an incredible amount of debugging time.