Small Basic Online: Fonts
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 "True".
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
- [[articles: Small Basic: Fonts]]
- [[articles: Small Basic: Character Set - Unicode]]
- [[articles: Small Basic Online]]
- [[articles: Wiki: Small Basic Portal]]