A new syntax highlighter for non-code codeblocks

Question

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:

Graphic Design Question

Code Review Question

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.

Answer 1

Expanding on this, diagrams like that would be a nightmare for someone using a screen reader. Here is what the current HTML5 spec has to say about such diagrams:

3.2.7.4 Implicit ARIA Semantics

These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:

<figure role="img" aria-labelledby="fish-caption">  
<pre>  
o           .'`/  
    '      /  (  
  O    .-'` ` `'-._      .')  
     _/ (o)        '.  .' /  
     )       )))     ><  <  
     `\  |_\      _.'  '. \  
       '-._  _ .-'       '.)  
   jgs     `\__\  
</pre>  
<figcaption id="fish-caption">  
 Joan G. Stark, "<cite>fish</cite>".  
 October 1997. ASCII on electrons. 28×8.  
</figcaption>  
</figure>  

I don't know if something like that could/would be implemented, but it's something to consider