Align buttontext

Post Reply
User avatar
Dutchman
Posts: 851
Joined: Mon May 06, 2013 9:21 am
My devices: iMac, iPad Air, iPhone
Location: Netherlands
Flag: Netherlands

Align buttontext

Post by Dutchman »

It took some effort, but I found how to scale button-size with font-size and text-length.
It is a contribution to the topic "Aligning Text In A Button" at viewtopic.php?f=26&p=6681#p6681

Code: Select all

'Align buttontext, by Dutchman, july 2015
'----- set display
FontSize=20
Font=12
DATA "Courier","Courier-Bold","Courier-BoldOblique"  '1-3
DATA "Courier-Oblique","CourierNewPS-BoldItalicMT"   '4-5
DATA "CourierNewPS-BoldMT","CourierNewPS-ItalicMT"   '6-7
DATA "CourierNewPSMT","Menlo-Bold","Menlo-BoldItalic"'8-10
DATA "Menlo-Italic","Menlo-Regular"                  '11-12
GOSUB Initialise
'
'----- Presets
Random$.min=5 'letters
Random$.max=12 'letters
Aligned$.Space$=" " 'minimum space
'
'----- Set scaled size
length=2*Random$.max+LEN(Aligned$.Space$)
bw=(length+1)*0.6*FontSize 'button-width
bh=2*fontsize 'buttonheight
'
'----- MAIN
PRINT "Font is: """;FontName$;""""
dy=1.2*bh 
FOR n=1 TO 5
  BUTTON n TEXT Aligned$(Random$,Random$,length) AT 10,n*dy SIZE bw,bh
NEXT n
FILL COLOR 1,0,0
BUTTON n TEXT "QUIT" AT 10,n*dy SIZE bw,bh
DO ! UNTIL BUTTON_PRESSED(STR$(n,"#"))
END
'
'===== Functions and Subroutines
DEF Aligned$(w1$,w2$,n)
'NOTE: LEN(w1$&w2$&Space$) <= n
nn=LEN(w1$&w2$&Space$)
x$="" ! WHILE LEN(x$)<n-nn ! x$&=" " ! END WHILE
Txt$=w1$&Space$&x$&w2$
RETURN txt$
END DEF
'
DEF Random$
txt$=""
FOR i=1 TO min+RND(max-min+1)
  txt$&=CHR$(97+RND(123-97))
NEXT i
RETURN txt$
END DEF
'
Initialise:
OPTION BASE 1
DIM Font$(12)
FOR i=1 TO 12 ! READ Font$(i)
NEXT i
FontName$=Font$((ABS(Font)-1)%12+1)
SET OUTPUT FONT NAME FontName$
SET OUTPUT FONT SIZE FontSize
SET BUTTONS CUSTOM
SET BUTTONS FONT NAME FontName$
SET BUTTONS FONT SIZE FontSize
DRAW COLOR 1,1,0
FILL COLOR 0,0,1
RETURN
buttons.PNG
buttons.PNG (58.38 KiB) Viewed 1659 times
Last edited by Dutchman on Thu Jan 19, 2023 3:40 pm, edited 2 times in total.

User avatar
rbytes
Posts: 1338
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone 11 Pro Max
iPad Pro 11
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Align buttontext

Post by rbytes »

Nice job. This works very well with the two iOS monospaced font families, Courier and Menlo. It doesn't work with any of the other iOS fonts I tried, which are all variably-spaced. It might be possible to modify the code to work with those, but you would have to first determine the width of each letter of the alphabet and the space for that particular font and size.
This is a code snippet that creates a width lookup table for any font and size. Possibly it could be adapted so that your alignment would work on all fonts.

Code: Select all

'determine the width of each character in pixels
GRAPHICS
DRAW FONT NAME "Arial"            'font name here
DRAW FONT SIZE 20                 'font size here
DIM C(53,2)
C(0,0)=32
C(0,1)=TEXT_WIDTH(" ")            'store width of a space
FOR n = 1 TO 26
C(n,0)=n+64
C(n,1)=TEXT_WIDTH(CHR$(n+64))     'store widths of uppercase characters
C(n+26,0)=n+96
C(n+26,1)=TEXT_WIDTH(CHR$(n+96))  'store widths of lowercase characters
NEXT n
END
The only thing that gets me down is gravity...

User avatar
Dutchman
Posts: 851
Joined: Mon May 06, 2013 9:21 am
My devices: iMac, iPad Air, iPhone
Location: Netherlands
Flag: Netherlands

Re: Align buttontext

Post by Dutchman »

Thanks for the suggestion, but for me it is sufficient that it works with monospaced fonts. ;)

User avatar
Dutchman
Posts: 851
Joined: Mon May 06, 2013 9:21 am
My devices: iMac, iPad Air, iPhone
Location: Netherlands
Flag: Netherlands

Re: Align buttontext

Post by Dutchman »

I have added the variable 'Font' with which you can choose a font from the list of 12 monospaced fonts.

Post Reply