This article explains about fonts for the GraphicsWindow object in Microsoft Small Basic Online (SBO).


What is a Font?

A Font is a designed character set.  In Windows, many programs have the ability to change fonts.  Many fonts are installed into C:\Windows\Fonts folder.  For example, this article uses "Segoe UI" font.

There are some common design patterns for fonts. Serif is a small line attached to the end of a stroke in a letter.  Serif fonts have serif.  Sans Serif fonts don't have serif.

There are two types of character width used in fonts.  One is Fixed Pitch fonts that have a same character width.  The other is Proportional fonts that have different width for each character.

You can see the fonts installed in your Windows system at C:\Windows\Fonts folder with File Explorer.

What is a Glyph?

Glyph is a shape of each character.

Font Properties

There are four font properties in GraphicsWindow.

FontBold

If GraphicsWindow.FontBold is "True", font characters become thick.  Default GraphicsWindow.FontBold value is "False" in SBO.

FontItalic

If GraphicsWindow.FontItalic is "True", font characters become slant.  Default GraphicsWindow.FontItalic value is "False".

FontName

GraphicsWindow.FontName contains font face name.  "Roboto" is the default font name in SBO.

FontSize

GraphicsWindow.FontSize means the height [pixels] of characters.  FontSize means the height between the top line and baseline.  You can recognize this with a sample program Font Sample for SBO 0.2 described below.

Default font size is 12 [pixels].

Available Fonts

Small Basic Online has only following fonts.  Default font is Roboto.  If other font name is set to GraphicsWindow.FontName, previous font will be used.

Font Name Arias Serif Fixed Pitch
Arial Helvetica    
Consolas      ✔
Courier New Courier  ✔  ✔
Roboto    ✔  
Times New Roman Times  ✔  

These fonts are defined in a SBO source file GraphicsWindowLibrary.cs .

Sample Programs

Fonts for SBO 0.1

This program shows available 8 fonts.

' Fonts for SBO 1.0
' Copyright © 2020 Small Basic Community. The MIT License.
' Last update 2020-05-17
 
Init()
For i = 1 To Array.GetItemCount(fonts)
  fn = fonts[i]
  DrawFont()
  y = y + fs
EndFor
 
Sub Clear
  GraphicsWindow.BackgroundColor = "LightGray"
  GraphicsWindow.BrushColor = "White"
  GraphicsWindow.FillRectangle(0, 0, gw, gh)
  GraphicsWindow.PenColor = "Gray"
  GraphicsWindow.PenWidth = 1
  GraphicsWindow.DrawRectangle(0, 0, gw, gh)
EndSub
 
Sub DrawFont
  GraphicsWindow.BrushColor = "Black"
  GraphicsWindow.FontName = fn
  GraphicsWindow.FontSize = fs
  GraphicsWindow.FontBold = "True"
  GraphicsWindow.DrawText(x, y, fn)
EndSub
 
Sub Init
  gw = 598
  gh = 498
  Clear()
  x = 20
  y = 20
  fs = 40
  fonts[1] = "Arial"
  fonts[2] = "Consolas"
  fonts[3] = "Courier"
  fonts[4] = "Courier New"
  fonts[5] = "Helvetica"
  fonts[6] = "Roboto"
  fonts[7] = "Times"
  fonts[8] = "Times New Roman"
EndSub

Fonts Sample for SBO 0.2

You can change font properties with this program.  Also, you can measure the size of fonts with a ruler.  The ruler can be shown in Chrome browser.  A checkbox can be toggled with [Bold] or [Italic] button.

' Fonts Sample for SBO 0.2
' Copyright © 2014-2002 Small Basic Community. The MIT License.
'
' History :
' v0.1 2014-01-03 Created from Ruler 0.61 (ZNR767).
' v0.2 2020-05-17 Modified for SBO.
'
GraphicsWindow.BackgroundColor = "LightGray"
GraphicsWindow.BrushColor = "Black"
GraphicsWindow.FontBold = "True"
title = Shapes.AddText("Font Sample for SBO 0.2")
GraphicsWindow.FontBold = "False"
Shapes.Move(title, 10, 10)
Not["True"] = "False"
Not["False"] = "True"
gw = GraphicsWindow.Width
gh = GraphicsWindow.Height
param = "left=10;top=40;caption=FontBold;checked=False;"
Controls_AddCheckBox()
cboxBold = return
param = "left=10;top=70;caption=FontItalic;checked=False;"
Controls_AddCheckBox()
cboxItalic = return
param = "left=10;top=100;caption=FontName;offset=70;length=15;"
Controls_AddTextBox()
tboxName = return
fn = GraphicsWindow.FontName
Controls.SetTextBoxText(tboxName, fn)
param = "left=10;top=130;caption=FontSize;offset=70;length=3;"
Controls_AddTextBox()
tboxSize = return
fs = GraphicsWindow.FontSize
Controls.SetTextBoxText(tboxSize, fs)
param = "left=10;top=160;caption=Text;offset=70;length=30;"
Controls_AddTextBox()
tboxText = return
Controls.SetTextBoxText(tboxText, "ABCDEFGHIJKLMNOPQRSTUVWXYZ")
btnRedraw = Controls.AddButton("Redraw", 10, 190)
btnBold = Controls.AddButton("Bold", 110, 190)
btnItalic = Controls.AddButton("Italic", 210, 190)
Controls.ButtonClicked = OnButtonClicked
Ruler_Add()
x = 800
y = 144
Ruler_Move()
an = 90
Ruler_Rotate()
RedrawText()
Controls.ButtonClicked  = OnButtonClicked
 
Sub OnButtonClicked
  If Controls.LastClickedButton = btnRedraw Then
    RedrawText()
  Else
    If Controls.LastClickedButton = btnBold Then
      cboxNum = Text.GetSubTextToEnd(cboxBold, 9)
    Else
      cboxNum = Text.GetSubTextToEnd(cboxItalic, 9)
    EndIf
    cboxObj[cboxNum]["checked"] = Not[cboxObj[cboxNum]["checked"]]
    cboxMark = cboxObj[cboxNum]["checkmark"]
    If cboxObj[cboxNum]["checked"] Then
      Shapes.ShowShape(cboxMark)
    Else
      Shapes.HideShape(cboxMark)
    EndIf
  EndIf
EndSub
 
Sub Ruler_Add
  ' Ruler | Add ruler
  uImage = "http://www.nonkit.com/smallbasic.files/ruler600.png"
  ruler["angle"] = 0
  ruler["moved"] = "False"
  ruler["clicked"] = "False"
  ruler["left"] = 0
  ruler["top"] = 0
  ruler["width"] = 620
  ruler["height"] = 50
  ruler["cx"] = ruler["left"] + ruler["width"] / 2
  ruler["cy"] = ruler["top"] + ruler["height"] / 2
  ruler["right"] = ruler["left"] + ruler["width"]
  ruler["bottom"] = ruler["top"] + ruler["height"]
  ruler["oRuler"] = Shapes.AddImage(uImage)
  Shapes.SetOpacity(ruler["oRuler"], 70)
  Shapes.Move(ruler["oRuler"], ruler["px"], ruler["py"])
EndSub
 
Sub RedrawText
  GraphicsWindow.BrushColor = "LightGray"
  GraphicsWindow.FillRectangle(0, 0, gw, gh)
  param["checkBoxName"] = cboxBold
  Controls_IsChecked()
  GraphicsWindow.FontBold = return
  param["checkBoxName"] = cboxItalic
  Controls_IsChecked()
  GraphicsWindow.FontItalic = return
  return = Controls.GetTextBoxText(tboxName)
  GraphicsWindow.FontName = return
  return = Controls.GetTextBoxText(tboxSize)
  GraphicsWindow.FontSize = return
  GraphicsWindow.BrushColor = "White"
  GraphicsWindow.FillRectangle(10, 230, gw - 10, return)
  txt = Controls.GetTextBoxText(tboxText)
  GraphicsWindow.BrushColor = "Black"
  GraphicsWindow.DrawText(10, 230, txt)
EndSub
 
Sub Ruler_Move
  ' Ruler | Move ruler
  ' param x, y - center of ruler
  ruler["cx"] = x
  ruler["cy"] = y
  ruler["left"] = x - ruler["width"] / 2
  ruler["right"] = x + ruler["width"] / 2
  ruler["top"] = y - ruler["height"] / 2
  ruler["bottom"] = y + ruler["height"] / 2
  If ruler["angle"] = 0 Then
    px = ruler["left"]
    py = ruler["top"]
  ElseIf ruler["angle"] = 90 Then
    px = x - ruler["height"] / 2
    py = y - ruler["width"] / 2
  EndIf
  Shapes.Move(ruler["oRuler"], px, py)
EndSub
 
Sub Ruler_Rotate
  ' Ruler | Rotate ruler
  ' param an - angle 0 or 90
  ruler["angle"] = an
  Shapes.Rotate(ruler["oRuler"], an)
EndSub
 
Sub SBO_SplitParam
  ' Small Basic Online | split "index=value;" format as an array param
  ' param param[] - to split
  ' return param[] - split
  _param = ""
  p = 1
  len = Text.GetLength(param)
  While p <= len
    eq = Text.GetIndexOf(Text.GetSubTextToEnd(param, p), "=")
    sc = Text.GetIndexOf(Text.GetSubTextToEnd(param, p), ";")
    name = Text.GetSubText(param, p, eq - 1)
    value = Text.GetSubText(param, p + eq, sc - eq - 1)
    _param[name] = value
    p = p + sc
  EndWhile
  param = _param
EndSub
 
Sub Controls_AddCheckBox
  ' Controls | Add check box
  ' param["left"] - the x co-ordinate of the check box
  ' param["top"] - the y co-ordinate of the check box
  ' param["caption"] - caption of the check box
  ' param["checked"] - optional flag ("True" if default is checked)
  ' returns return - the check box that was just added to the Graphics Window.
  SBO_SplitParam()
  cboxColor = GraphicsWindow.BrushColor
  cboxSize = GraphicsWindow.FontSize
  cboxFont = GraphicsWindow.FontName
  cboxPW = GraphicsWindow.PenWidth
  cboxPC = GraphicsWindow.PenColor
  cboxNum = cboxNum + 1
  cboxX0 = param["left"]
  cboxX1 = cboxX0 + cboxSize + 1
  cboxY0 = param["top"] + 1
  cboxY1 = cboxY0 + cboxSize + 1
  GraphicsWindow.PenWidth = 1
  GraphicsWindow.PenColor = "Gray"
  GraphicsWindow.BrushColor = "White"
  cboxRect = Shapes.AddRectangle(cboxSize, cboxSize)
  GraphicsWindow.PenWidth = cboxPW
  GraphicsWindow.PenColor = cboxPC
  Shapes.Move(cboxRect, cboxX0, cboxY0)
  cboxObj[cboxNum]["x0"] = cboxX0
  cboxObj[cboxNum]["x1"] = cboxX1
  cboxObj[cboxNum]["y0"] = cboxY0
  cboxObj[cboxNum]["y1"] = cboxY1
  GraphicsWindow.BrushColor = cboxColor
  GraphicsWindow.FontName = "Arial"
  cboxMark = Shapes.AddText("✔")
  Shapes.Move(cboxMark, param["left"] + 1, param["top"])
  cboxObj[cboxNum]["checkmark"] = cboxMark
  If (param["checked"] = "") Or Not[param["checked"]] Then
    Shapes.HideShape(cboxMark)
    cboxObj[cboxNum]["checked"] = "False"
  Else
    cboxObj[cboxNum]["checked"] = "True"
  EndIf
  GraphicsWindow.FontName = cboxFont
  cboxCaption = Shapes.AddText(param["caption"])
  Shapes.Move(cboxCaption, param["left"] + cboxSize * 1.5 , param["top"])
  return = "CheckBox" + cboxNum
EndSub
 
Sub Controls_IsChecked
  ' Controls | Is checked
  ' param["checkBoxName"] - check box name
  ' return - "True" if checked
  iCheckBox = Text.GetSubTextToEnd(param["checkBoxName"], 9)
  return = cboxObj[iCheckBox]["checked"]
EndSub
 
Sub Controls_AddTextBox
  ' Controls | Add text box with caption
  ' param["left"] - the x co-ordinate of the text box caption
  ' param["top"] - the y co-ordinate of the text box
  ' param["caption"] - caption of the text box
  ' param["offset"] - optional offset for the text box from the left
  ' param["length"] - optional character length for the text box
  ' return - the text box just added
  SBO_SplitParam()
  fs = GraphicsWindow.FontSize
  len = Text.GetLength(param["caption"])
  tboxCaption = Shapes.AddText(param["caption"])
  Shapes.Move(tboxCaption, param["left"], param["top"] + fs * 0.2)
  offset = param["offset"]
  If offset = "" Then
    offset = len * fs * 0.9
  EndIf
  return = Controls.AddTextBox(param["left"] + offset, param["top"])
  tboxLen = param["length"]
  If tboxLen <> "" Then
    tboxWidth = (tboxLen + 1) * fs * 0.9
    tboxHeight = fs * 2
    Controls.SetSize(return, tboxWidth, tboxHeight)
  EndIf
EndSub

See Also