[CSDb] - User Forums - Variable Width Fonts and color alignment

You are not logged in - nap

CSDb User Forums

Forums > C64 Coding > Variable Width Fonts and color alignment

2023-03-09 07:27

TWW

Registered: Jul 2009
Posts: 541

Variable Width Fonts and color alignment

Heyho

I am writing a routine to display text on a hires bitmap screen with a variable width font ('W' is 7 pixels vs. 'I' is 3 pixels or whatever).

The routine is done and it's able to handle alignment to the left, right, centred and distributed (spaces are padded so the first and last word touches the left/right margin).

I started thinking about changing color on the text while keeping hte routine flexible in terms of alingment. I came up with the following example on how it might be done, but I can't help thinking I'm overcomplicating it:

Example: "FA" should be aligned within it's own '1-8' block:
  |123456781234567812345678123456781234567812345678| <- 1-8 blocks
  |do re mi ti FA so la ti to... end of line.      | <- Distributed aligned text, but last line so it's left aligned.

We move FA to the next 1-8 block:
  |123456781234567812345678123456781234567812345678|
  |do re mi ti     FA so la ti to... end of line.  |

We move 'so' to the next 1-8 block:
  |123456781234567812345678123456781234567812345678|
  |do re mi ti     FA      so la ti to... end of line.|

We centre FA in the middle of one or more 8 block(s):
  |123456781234567812345678123456781234567812345678|
  |do re mi ti        FA   so la ti to... end of line.|

We distribute spaces on the left block, ensuring 'ti' does not enter FA's block:
  |123456781234567812345678123456781234567812345678|
  |do   re  mi   ti   FA   so la ti to... end of line.|

The new "minimum" space distance is 2, so we apply that to the right section:
  |123456781234567812345678123456781234567812345678|
  |do   re  mi   ti   FA   so  la  ti  to...  end  of  line.|

We now need to shave off the end so the line fits within the available width:
  |123456781234567812345678123456781234567812345678|
  |do   re  mi   ti   FA   so  la  ti  to...  end  |
  |of line.                                        |

If the text is block aligned, the last word (end) must be aligned to the right margin:
  |123456781234567812345678123456781234567812345678|
  |do   re  mi   ti   FA   so  la  ti  to...    end|
  |of line.                                        |

Finally the spaces in the last block are be distributed:
  |123456781234567812345678123456781234567812345678|
  |do   re  mi   ti   FA   so  la   ti  to...   end|
  |of line.                                        |

And this off course is one word with different color. It might be every character changing word, it might be one color chane or it might be 10.

So it seems it would take a lot of checking and calculating to make it look right, and wanted to hear if anyone has some thoughts or input to the aproach?

2023-03-09 12:37

Jetboy

Registered: Jul 2006
Posts: 217

Depending on use case, it might be easier to burden user to align the words himself. Ie. if it will be used in demo, and never change, then you can align it by hand.

For the general use routine your solution seems right.

I would however change the color on the closest 1-8 block boundary and do not mess with the spacing at all. It wouldn't look as good in some cases, but for some would be ok, and would be much simpler to implement.

Or you could add some special characters to manipulate how the text is supposed to be displayed. IE. change spacing betwen letters to 1,2,3... pixels. Change the spacing betwen words to 1,2,3... pixels, etc.

All depends on use cases.

2023-03-10 00:18

Skate

Registered: Jul 2003
Posts: 491

My suggestion is similar to TWW's. My proportional text editor back in the days had some different width space characters for alignment. BG/FG coloring was also done by adding invisible characters to the text. So, it was up to the author to do the alignments. If i recall correctly, $e0-$ef was being used for BG colors and $f0-$ff for FG colors. It was a WYSIWYG editor. So, it was easy to see any color clashes and fix by adding some prefix/postfix space characters. And you were able to delete all invisible characters like colors when you press backspace key. In other words, there were no seperate tables, everything was embedded in the text data.

This is where my editor was used.
64 Times #1

2023-03-10 05:59

ChristopherJam

Registered: Aug 2004
Posts: 1380

Reverse background and foreground, do all the colours with an expanded multicolour sprite underlay, enforce a minimum 3 pixel gap at any colour change (either by only colour changing on word boundaries, or having 3px between letters).

Any letter can then be any of d021/sprite mcm1/sprite mcm2, or the sprite colour for that group of 6 chars.

Orrr, seeing as you're targeting bitmap mode and already have one bg colour per char, use an expanded hires sprite underlay, then you only need a 1px gap between letters for arbitrary split positions and up to 8 colours available for patching splits that occur mid character.

But failing that, yes your approach seems sound. Don't forget you can adjust the split positions by using X-scroll. And I concur with others that if it's for a limited set of strings known in advance there's a lot to be said for just hand tuning it.

2023-03-10 08:30

TWW

Registered: Jul 2009
Posts: 541

Thanks for the suggestions. Slight clarification;

The routine is not an editor, but should be able to take some random text (f.eks. the "Lorem ipsum.." placeholder text) and be able to handle any color change within the sentence (also preferably be able to handle colorchanges in a word if you f.ex. wanted to write "rainbow" with each letter coloured).

I think the aproach would have to be to:
- calculate width of one line of text
- map spaces (used for padding out the line if it's margin aligned left/right)
- count any color blocks
- adjust text within each color block
- adjust spaces as best possible and push any excess to next line.

The sprite idea is good and perhaps if the # of color blocks within a line is below, say 4, SC sprites could be put to handle these cases and the line could be done without any color limit alignment.

2023-03-10 13:36

Perplex

Registered: Feb 2009
Posts: 254

A simpler approach is to make every space between words of different colour a minimum of 7 pixels wide. That ensures you won't get clashes.

It means the fitting of text on a line won't be optimal, but in practice nobody will notice.

Refresh

Subscribe to this thread:

You need to be logged in to post in the forum.

Search the forum:
Search for in
All times are CET.

Search CSDb

Advanced

Users Online

Alakran_64
Fastbom
Unlock/Padua/Albion
Krill/Plush
skull
CA$H/TRiAD
wil
Rebok/BOOM!/Tropyx
Viti/Hokuto Force
megasoftargentina
Guests online: 130

Top Demos

1 Next Level  (9.8)
2 Mojo  (9.7)
3 Coma Light 13  (9.7)
4 Edge of Disgrace  (9.6)
5 Comaland 100%  (9.6)
6 No Bounds  (9.6)
7 Uncensored  (9.6)
8 Wonderland XIV  (9.6)
9 Memento Mori  (9.6)
10 Bromance  (9.5)

Top onefile Demos

1 It's More Fun to Com..  (9.7)
2 Party Elk 2  (9.7)
3 Cubic Dream  (9.6)
4 Copper Booze  (9.5)
5 TRSAC, Gabber & Pebe..  (9.5)
6 Rainbow Connection  (9.5)
7 Wafer Demo  (9.5)
8 Dawnfall V1.1  (9.5)
9 Quadrants  (9.5)
10 Daah, Those Acid Pil..  (9.5)

Top Groups

1 Nostalgia  (9.3)
2 Oxyron  (9.3)
3 Booze Design  (9.3)
4 Censor Design  (9.3)
5 Crest  (9.3)

Top Musicians

1 Vincenzo  (9.8)
2 Rob Hubbard  (9.7)
3 Stinsen  (9.7)
4 Jeroen Tel  (9.6)
5 Linus  (9.6)

Page generated in: 0.057 sec.