Programming presumptions: Text Box

Programming presumptions: Text Box

We all take for granted the programmed world around us every time we turn on our computers, unlock our phones and interact in anyway with technology. This taking for granted extends to everything we've all ever done in Windows 10 which wasn't directly in the command prompt and even then I would argue there are tasks within cmd which count as a presumption. I am a developer, I'll be it a junior (I've not yet earned my degree), and when you program things which already exist but you can not copy code -the presumptions of what it takes to create the code are blown into tiny pieces. These presumptions are something I'd like to discuss as I find complications one wouldn't normally think of in this series of articles.

No alt text provided for this image

I am programming in a games framework called SDL, it gives you the idea of drawing graphics to the screen and does a lot of the work with sound and input. I've already done most of the leg work to get what I'm showing today but long story short, I've a Text class which renders text you give to it. I set a max length for the lines and it will display the text on the screen. The top section above shows how when rendering the line it'll split the string into spaces and count the letters on a given line pushing whole words down. The second is the pre-processing which looks for words which are more than a line length and splits them before my main code sees them. All of this was fairly easy, however the presumption comes with selection.

No alt text provided for this image

The obvious starting point to translate mouse clicks to the selection character's position (the bar) is to divide the relative X and Y by the character size. This would get you say (18, 3) for the t in left, then you could simply multiply the Y by the number of characters on a line and add on the X cord, simple. Not so simple as it turns out as this would only work if all the lines were of equal size, under this method the d in aligned would be 8 characters out due to the dead space above. My solution to this was to break up the lines in the string, every-time I move to a new line add a new line to some storage and the starting character's index. Then you instead find the line you're clicking on and add the relative X to the start character's index. This works for the most part however what would happen if you'd click on the green 'non character' sections? well clicking on say (22, 3) would place your bar between the i and g in aligned. The presumption is the bar would appear at the end of the line you clicked, so for this you need to check the length of the line and default the value to that character.

No alt text provided for this image

So the presumption from years of using word processing is that when you select a letter it should round to the nearest side of the letter and place the bar there. A question I had to answer myself though was where should the bar go when clicking at the end of the fourth line, a line ending in a space with a new line below. By default my system did option one and I had to completely rework the way my cursor bar was drawn to make it work. This was fairly complicated basically if a letter hadn't been drawn on the line and the cursor would be before the first letter it instead uses the previous location. Trust me that is easy to mention now and difficult to work the logic out. In my system I split the whole string by spaces, run a method to split big blocks which do not have a space, then it runs through each word then each letter drawing them or the cursor keeping track of the vectors.

The above gif was complicated to make work (the text system not making a clip) and to design properly. There are more presumptions one would come to expect though and in order to keep this article short I'm going to rattle them off with the method I'd use to implement them.

  • When you press up and down on the arrow keys the cursor moves up. I find which character I'd selected in the context of the line (like the 5th character of the line) and I'd just find the 5th spot on the line above or default to the end.
  • Pressing end and home. Finds the 0th on the line and the end of the line, and count a cursor which is one the edge of a line as on the line below.
  • Writing text in and cursor follows. On a key-press if it's not backspace just add one to the selected location and the cursor should move with the string changes.
  • Copying and Pasting. Insert into the string on paste and then add the size of the pasted string to the selected cursor.
  • Selecting multiple characters for delete, copy etc. I honestly have no idea 😊

The conclusion I draw from this is, everything we think of as a given in an operating system is actually fairly sophisticated and it is only because we build on the shoulders of giants that these elements are so persistent.

Me and Dylan had a similar realisation when it came to rendering text through a 8x8 tile map. The main crux of the issue was that letters like g y p need to be rendered lower down so that the tail of the letters is below the line of text. We also found that b d also needed the same sort of effect. It’s amazing the simple things you take for granted when you try to do basic things from scratch!

To view or add a comment, sign in

More articles by Scott Foster

  • Why Gamepads shine!

    I love controllers as much as I love a keyboard and mouse. Despite only having personally owned Nintendo consoles and a…

  • Why Games?

    Something I've been asked at interviews, speaking with family members who learn of my career path and general people…

  • Clean code & why it's important

    I'm a C++ coder, studying the subject through Games Programming. Many hundreds of people work on a single video game or…

  • Pokémon Sword and Shield Thoughts

    Pokémon has penetrated the gaming world and beyond into main stream movies such as the amazing Detective Pikachu…

  • Culling in 2D for people in a hurry

    Culling in the context of this article relates to drawing only what you see on the screen or is seen to a camera…

  • Mario's Jump - It's complicated

    My latest project involves recreating Super Mario and either because I like a challenge or because I hate myself, I…

    4 Comments
  • What Pokémon Let's Go does right

    I love the Pokémon Series. I've been playing these games since Pokémon Blue on a green and darker green original…

Others also viewed

Explore content categories