Font Names

[rbytes]

Mr. K, I adapted your nice shading code for this demo, and added a hard black edge on the bottom and right of the letters.
Only some of the fonts I used are standard Windows fonts. The rest are available as free downloads from 1001fonts.com
Check the code for the line that names all of the fonts. Once you have them in your downloads folder, click on each .ttf font file. Windows will ask if you want to install it (if it is a .zip file you will be prompted to unpack it first.)

Code: Select all

''
Font Names 2 by rbytes
September 2017
Only half of the fonts in the list below are standard windows fonts. You can download
the others free from 1001fonts.com
''

' Create a list of 10 varied fonts on your device and split them into an array. This is my list.
text = "Courier New,Arial,Papyrus,Comic Sans,Gill Sans,01 Digit,Ranchers,Script MT,Segoe Print,Stencil"
words = #.split(text, ",")

' These are y shift values to even out the varied vertical spacing of different fonts
' you start with them all at 0 and change them to plus or minus values as needed. They are also split to an array.
text = "0,0,0,5,15,35,20,25,0,30"
shifts = #.split(text, ",")

' Set the text and font size
t="The Quick Brown Fox"
#.fontsize(80)

' Create a nested loop. the outer loop draws each of the 10 fonts. The inner loop adds shading 
' above and left of each row of text
z,n = 10
> y, 1..10
  z=1
  > i, 1..n
    z *= 1.11
    nam = words[y]
    shift = #.val(shifts[y])
    #.fontname(nam)

    ' the next two lines draw each row of the text in black
    #.drawcolor(0,0,0)
    #.drawtext(20+4+10,(y - 1) * 74 + shift+4+10,t)

    ' the next two lines draw on top of the black text, covering all except a black border
    ' below and to the right of the text
    #.drawcolor(#.hsv2rgb(y*36,i/n,i/n):3,n/10)
    #.drawtext(20+z+i,(y - 1) * 74 + shift+z+i,t) 'draws text t at point x,y using current drawing
    #.delay(0.04)
  <
<

[rbytes]

The blue letters above are very hard to read with the dark shading. Here is code to display the font names without any shading.

Code: Select all

''
Font Names 1 by rbytes
September 2017
Only half of the fonts in the list below are standard windows fonts. You can download
the others free from 1001fonts.com
''

' Create a list of 10 varied fonts on your device and split them into an array. This is my list.
text = "Courier New,Arial,Papyrus,Comic Sans,Gill Sans,01 Digit,Ranchers,Script MT,Segoe Print,Stencil"
words = #.split(text, ",")

' These are y shift values to even out the varied vertical spacing of different fonts.
' you start with them all at 0 and change them to plus or minus values as needed. They are also split to an array.
text = "0,0,0,5,15,35,20,25,0,30"
shifts = #.split(text, ",")

' Define all fonts the same size
#.fontsize(80)

' Create a loop to draw each row of text
> y, 1..10

  ' the y variable sets the color of each text row in the bext line.
  #.drawcolor(#.hsv2rgb(50 + y*36,1,1):3)
  nam = words[y]
  t=nam
  shift = #.val(shifts[y])
  #.fontname(nam)

  ' the y variable also sets the vertical position of each row in the next line.
  #.drawtext(20,(y - 1) * 74 + shift,t) 'draws text t at point x,y using current drawing
<

[Mr. Kibernetik]

Following your idea with shading and outline, I made this drawing text function. It can draw with and without outline:

Code: Select all

#.fontname("Bauhaus 93")
#.fontsize(60)
text = "The Quick Brown Fox"
drawtext(10,30,text,0)
drawtext(10,100,text,1)

drawtext(x,y,text,outline)=
  n = 10
  > i, 1..n
    ? i=n & outline
      #.drawcolor(0,0,0)
      #.drawtext(x-1,y-1,text)
      #.drawtext(x+1,y-1,text)
      #.drawtext(x-1,y+1,text)
      #.drawtext(x+1,y+1,text)
    .
    p = i/n
    #.drawcolor(#.hsv2rgb(160,p,p):3,p)
    #.drawtext(x,y,text)
    x += 1
    y += 1
<
.

image.PNG (35.7 KiB) Viewed 3071 times

[Mr. Kibernetik]

More advanced version - it can draw using shadows or outlines:

Code: Select all

#.fontname("Bauhaus 93")
#.fontsize(60)
text = "The Quick Brown Fox"
drawtext(10,0,text,0,0)
drawtext(10,70,text,1,0)
drawtext(10,140,text,0,1)
drawtext(10,210,text,1,1)

drawtext(x,y,text,outline,shadow)=
  n = 10
  n0 = n
  ? shadow, n0 = 1
  > i, n0..n
    ? i=n & outline
      #.drawcolor(0,0,0)
      #.drawtext(x-1,y-1,text)
      #.drawtext(x+1,y-1,text)
      #.drawtext(x-1,y+1,text)
      #.drawtext(x+1,y+1,text)
    .
    p = i/n
    #.drawcolor(#.hsv2rgb(160,p,p):3,p)
    #.drawtext(x,y,text)
    x += 1
    y += 1
  <
.

image.PNG (40.81 KiB) Viewed 3069 times

[rbytes]

This is very handy. I spent some time in radio and television, and got to work with TV titling systems such as the Chyron. They all had outline and shadow as standard features, since these can make text readable on various backgrounds. You may also notice that on tv, text shadows almost always go down and right from the text. There is some study of perception that deems that the most readable form.

[Mr. Kibernetik]

Instead of this code:

Code: Select all

text = "Courier New,Arial,Papyrus,Comic Sans,Gill Sans,01 Digit,Ranchers,Script MT,Segoe Print,Stencil"
words = #.split(text, ",")

you can write this:

Code: Select all

words = ["Courier New","Arial","Papyrus","Comic Sans","Gill Sans","01 Digit","Ranchers","Script MT","Segoe Print","Stencil"]

[rbytes]

Thanks.

[Mr. Kibernetik]

In SPL, arrays can store mixed types of objects. Array can even store an array of arrays
So you can assign array data like that:

Code: Select all

a = ["text",10,"new text",20]

This is the same as:

Code: Select all

a[1] = "text"
a[2] = 10
a[3] = "new text"
a[4] = 20

[rbytes]

Yes, I see. So in the font programs I posted, the font names and the shift variables could be stored in the same array.

[Mr. Kibernetik]

Yes, and you will not need to convert text to numbers, because they will be genuine numbers already in array:

Code: Select all

words = [["Courier New","Arial","Papyrus","Comic Sans","Gill Sans","01 Digit","Ranchers","Script MT","Segoe Print","Stencil"],[0,0,0,5,15,35,20,25,0,30]]

So, words[10,1] will be "Stencil" and words[10,2] will be 30.