Well, the code in these buttons isn't from me directly. I've asked for help (privately) in the past for buttons to nudge my custom fonts around, and more recently I had to ask for help understanding various things that can be done with the image interface.
In this case, image.translate[pos w] does the moving and wrapping around that you want.
And here is a set of working buttons, as requested:
%%WGT0{"w":[{"name":"nudgeleft","type":"button","size":[16,16],"pos":[345,148],"script":"on click do\n c:char.value-32\n f:currfont[]\n f[c]:f[c].translate[(-1,0) 1]\n view[]\nend","font":"mono","text":"<"},{"name":"nudgeright","type":"button","size":[16,16],"pos":[365,148],"script":"on click do\n c:char.value-32\n f:currfont[]\n f[c]:f[c].translate[(1,0) 1]\n view[]\nend","font":"mono","text":">"},{"name":"nudgeup","type":"button","size":[16,16],"pos":[355,129],"script":"on click do\n c:char.value-32\n f:currfont[]\n f[c]:f[c].translate[(0,-1) 1]\n view[]\nend","font":"mono","text":"^"},{"name":"nudgedown","type":"button","size":[16,16],"pos":[355,167],"script":"on click do\n c:char.value-32\n f:currfont[]\n f[c]:f[c].translate[(0,1) 1]\n view[]\nend","font":"mono","text":"v"}],"d":{}}
The arrows aren't as nice as your example, but hopefully this is enough to get you started.