Show what would act on a screen as a picture on every surface, and keep a value's bidi within it

Speech wrote a value's C1 controls (U+009B is a CSI to some terminals),
DEL, line separators and bidi overrides as they were; the CLI and the
TUI wrote line separators (a pipe's reader may break its line there) and
the controls that turn text around (a terminal then reverses the rest of
its line, other values' cells too); the web page showed controls as they
were and let a label's override reverse its badge. Now every surface
shows controls, DEL, C1 and line and paragraph separators as pictures
(vega_visible); a terminal's cells show embeddings, overrides and
isolates as U+FFFD too (vega_cell); speech says a space for the one and
nothing for the other; the page shows the pictures and isolates each
value, while /screen's JSON keeps values as they are. screen_meaning
checks the CLI, the TUI, speech and the JSON against that rule, and that
nothing a value holds reaches any output as a control; the browser check
sees the page show it.

1 files changed, 6 insertions, 1 deletions

diff --git a/surfaces/web.c b/surfaces/web.c
index a4759c4..dfa9470 100644
--- a/surfaces/web.c
+++ b/surfaces/web.c
@@ -193,6 +193,8 @@ static const char *const page_parts[] = {
 "ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}"
 "li,tbody tr{cursor:pointer}li{display:flex;gap:10px;padding:7px 12px;border-top:1px solid var(--line)}"
 "li:first-child{border-top:0}.label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:pre}"
+/* Each value its own paragraph as bidi goes: what turns text around stays in it. */
+".label,.detail,.badge,td,th,dd,dt,h1,h2 span{unicode-bidi:isolate}"
 ".detail{color:var(--muted);white-space:pre}.badge{font-size:12px;padding:1px 8px;border:1px solid currentColor;"
 "border-radius:10px;align-self:center}[aria-selected=true]{background:var(--focus);color:#fff}"
 "table{width:100%;border-collapse:collapse;border:1px solid var(--line)}th{text-align:left;color:var(--muted);"
@@ -229,7 +231,10 @@ static const char *const page_parts[] = {
 "finally{busy=false;if(again){again=false;refresh()}}}"
 "function fit(parent,count,make){while(parent.children.length>count)parent.lastChild.remove();"
 "while(parent.children.length<count)parent.append(make());return[...parent.children]}"
-"function text(node,value){if(node.textContent!==value)node.textContent=value}"
+/* A value shown as the other surfaces show it (vega_visible): controls as their pictures. */
+"function visible(value){return String(value).replace(/[\\x00-\\x1f\\x7f-\\x9f\\u2028\\u2029]/g,c=>{const n=c.charCodeAt(0);"
+"return String.fromCharCode(n<32?0x2400+n:n===127?0x2421:n<160?0xfffd:0x2424)})}"
+"function text(node,value){value=visible(value);if(node.textContent!==value)node.textContent=value}"
 "function attr(node,name,value){if(value==null)node.removeAttribute(name);"
 "else if(node.getAttribute(name)!==String(value))node.setAttribute(name,value)}"
 "const views=new Map();"