Josh Chunick

Font Style Viewer   Download This little project came about from my search for a specific set of about 20 fonts I had just installed called pixel fonts. Wouldn't you know, I couldn't remember which ones they were from the 260 fonts in the dropdown list of Director's Text Inspector. I'm a bit of a font freak, probably owing to the fact that I started my computer career as a graphic designer so normally I would have about 500-700 fonts installed; this problem could easily stretch to biblical proportions. Now, this issue has cropped up in the past, but I had always been too busy with something more important. I found myself thinking for the gazillionth time, “Wouldn't it be nice if Director had a font viewer like Windows when you double-click on a font in the Fonts folder, or Photoshop, where you get a preview of what the font will look like.” ... And that's where the idea for the Font Style Viewer was born. (cue dramatic music)

I could have found a way to call up the Windows Font Viewer, but it only displays one font at a time. The problem is it wouldn't be Mac compatible and Director renders fonts a wee bit differently thus it wouldn't accurately represent how Director displays the font, either. From those considerations, I naturally decided to build it in Director for use as an authoring utility.

For me a good utility is one that:

• has few options and an uncluttered design.
• does exactly what it says.
• is simple to use.
• makes you ask yourself, “'How did I ever live without this?”

This Director authoring utility satisfies one simple purpose: it allows a developer to easily access his installed fonts and shows him a sample of what it will look like when set in a text member. A few useful features were added:

• the ability to toggle antialiasing and kerning
• the ability to set a custom example text
• the ability to set a custom font size list
• a link explaining what a pangram is for the incurably curious (which all developers should be)

The most subtle, yet useful feature has to be the search function built into the list. Someone scrolling through the font list and clicking on a font may never come across the power programmed into the list. Tucked away under the hood, just waiting to be taken advantage of are the key commands:

• Up/Down arrow keys will scroll the font list one font at a time.
• Page Up/Page Down keys will scroll the font list by the number of visible lines.
• Home/End keys will scroll the list to the first and last entries in the font list.
• Typing a single letter or several letters of a font name will cause the selection to jump through the list to the first occurance of that letter combination.

If you look closer then you will notice that I'm using an uneditable field, so how are key strokes being captured? It's a technique I first learned from the DOUG forums using the keyDownScript in a behavior. The script listed below contains most of the interesting code in the Font Style Viewer.

property spriteNum, sp, mem

property _line -- currently selected line

property _lineSelected -- the active line when mouse over and using keys

property _fontList -- linear list; the list of fonts

property _fontCount -- integer; the number of fonts in the list

property _searchStr -- string; the current search string typed in

property _lastKey -- integer; the number of ticks since a key was pressed

property _fontSizeList -- linear list; list of the font sizes

property _pangram -- string; the display string

on beginSprite me

  sp = sprite(spriteNum)

  mem = sp.member

   -- initialize a bunch of stuff here

  mem.wordWrap = False

  mem.scrollTop = 0

  _line = 0

  _lineSelected = 0

  _searchStr = ""

  me.setPangram()

  me.setFontSizes()

  -- _fontList =  baFontList( "All" ) -- buddyAPI -- PC only

  -- _fontList = freeGetFontList() -- FreeFont Xra -- PC only

  -- get the list of fonts using the lingo method – both PC & Mac

  _fontList = (new(#font)).fontList()

  _fontCount = _fontList.count

  _fontList.sort()

  tmpStr = ""

  repeat with i in _fontList

    put i & RETURN after tmpStr

  end repeat

  delete the last char of tmpStr

  mem.text = tmpStr

  -- set the keyDownScript to the sprite's on keyDown handler.

  the keyDownScript = string(sp) & ".keyDown()"

end

on exitFrame me

  -- the lastKey always equals 0 if used in the on keyDown handler

  -- so it's necessary to set a variable here.

  _lastKey = the lastKey

end

on keyDown me

  Case the keyCode of

      115: -- Home

      mem.scrollTop = 0

      me.hiliteLine(1)

      me.mouseUp()

    119: -- End

      mem.scrollTop = 0

      mem.scrollByLine(_fontCount)

      me.hiliteLine(_fontCount)

      me.mouseUp()

    116: -- Page Up

      mem.scrollByPage(-1)

      theLine = mem.scrollTop / mem.lineHeight + 1

      me.hiliteLine(theLine)

      me.mouseUp()

    121: -- Page Down

      mem.scrollByPage(1)

      theLine = mem.scrollTop / mem.lineHeight + 1

      me.hiliteLine(theLine)

      me.mouseUp()

    125: -- Down Arrow

      mem.scrollByLine(1)

      theLine = min(_fontCount, _line + 1)

      me.hiliteLine(theLine)

      me.mouseUp()

    126: -- Up Arrow

      mem.scrollByLine(-1)

      theLine = max(1, _line - 1)

      me.hiliteLine(theLine)

      me.mouseUp()

    otherwise

      -- this is the magic; it changes position by the character typed.

      -- the lastKey is measured in ticks. This part allows the user

      -- to type in a series of characters such as 'arial' or to scroll

      -- alphabetically to fonts starting with 'a' then 'r' and then 'i'...

      -- it all depends on the speed of the typing.

      if _lastKey < 30 then

        put (the key) after _searchStr

      else

        _searchStr = the key

      end if

      -- .findPosNear() will find the closest matching item in a sorted list.

      pos = _fontList.findPosNear(_searchStr)

      -- ignore non-exact matches. Otherwise odd 'near' matches are made.

      if  _fontList[pos].char[1.._searchStr.char.count] = _searchStr then

        mem.scrollTop = 0

        mem.scrollByLine(pos - 1)

        -- custom handler to hilite the line.

        me.hiliteLine(pos)

        me.mouseUp()

      end if

  End Case

end

Future Additions:
A version that's specifically designed for docking which will function more like the one in CorelDRAW is currently in the works.  As well, I plan on porting a version for D11.