I've seen a few questions, and posted one myself, where the OP has used characters within codeblocks to represent a visual structure. Two examples:
I think it's useful in many situations, like when you want to show a structure but don't want them to focus on what's inside it. Some people may comment and say it's better to provide a screen shot, I would counter-argue that in some situations it's better this way.
Anyway, it's all well and useful except for one small problem:
It doesn't keep it's form when viewed on mobiles, it completely messes up due to the text wrap.
So, would it be possible to create something similar to the Syntax Highlighters, like so:
<!-- vis rep -->
that could tell those codeblocks to apply different conditions to it's contents, such as:
- Reducing or Increasing font-size to fit the screen and keep characters on the right lines
- Or a slightly less beautiful option, but probably easier to implement, that applies scrolling overflow to the codeblock on mobile devices.
Any other ideas that would fix this issue?
It's not a major problem, just something that could be improved.