Hey folks,
I’ve spent several hours on this and am back to the drawing board, so I’m hoping someone might have an idea that will allow me to move forward. I’m trying to create a prototype of a (VERY) simple code editor, consisting of a text area with a monospace font and a column to the left of it showing line numbers. Nothing more fancy than that.
This is one of those things that sounds straightforward and simple, but since I need to account for text wrapping, it runs up against Axure’s lack of awareness of text sizes at runtime…
Things I’ve tried:
-
As the user types, copy their text into a repeater the same width as the text field, use another column in the same repeater as the line number column
-this works for default content loaded when the page loads, but if the user adds text, it breaks. -
Copy the user’s input onto a rectangle behind the text field, which is the same width + ~50px for line numbers. Replace all visible characters with spaces. Add numbers to the beginning of each line. (this is a simplified explanation, but hopefully you get the idea). This way, when a line wraps in the text field, it also wraps on the rectangle, so the position of the line numbers is also affected.
-This was stupidly complicated, and kinda works, but only if a line wraps once. Wrapping more than once causes inaccuracies.
I’m really hoping there’s a native Axure solution that doesn’t rely on plugins. Anyone done this before?