screen elements and userinput in XHTML

[Warren Block]

In XHTML documents, our current CSS stylesheet does not distinguish 
between user-typed input and system output.  That's my fault, Gabor had 
user input in bold but I felt it had so much contrast that it distracted 
rather than clarified.  Our screen elements are not separated from other 
text, either.

The current programlisting elements are better, in a box with a gray 
background.  We could make screen elements identical, but there is some 
value to the reader in making them look different.

I checked various web documentation pages for other projects, and most 
did not distinguish between system output and user input.  In some 
cases, that is likely to prompt a user to type a prompt.  The 
best-looking example I found was some Slackware documentation, which 
uses plain text for system output and bold for user input, but put it on 
a gray background which helped tone down the contrast.

Putting this all together, I've been trying this experimental addition 
to doc/share/misc/docbook.css.  It makes the userinput bold, draws a box 
around screen elements, but uses a sort of medium tan background so it 
does not look like a programlisting.

The color is questionable, and there may be a better choice.  Lighter 
colors seemed too bright.  But I do find this easier to read.

Comments welcome.


Index: docbook.css
===================================================================
--- docbook.css	(revision 42404)
+++ docbook.css	(working copy)
@@ -240,6 +240,10 @@
  	white-space: pre;
  	font-family: monospace;
  	padding: 1ex;
+	background-color: #ec8;
+	border: 1px solid #ccc;
+	border-radius: 6px;
+	line-height: 1.1;
  }

  div.programlisting {
@@ -340,7 +344,7 @@
  }

  .userinput {
-	font-weight: normal;
+	font-weight: bold;
  }

  pre.screen strong {
-------------- next part --------------
Index: docbook.css
===================================================================
--- docbook.css	(revision 42404)
+++ docbook.css	(working copy)
@@ -240,6 +240,10 @@
 	white-space: pre;
 	font-family: monospace;
 	padding: 1ex;
+	background-color: #ec8;
+	border: 1px solid #ccc;
+	border-radius: 6px;
+	line-height: 1.1;
 }
 
 div.programlisting {
@@ -340,7 +344,7 @@
 }
 
 .userinput {
-	font-weight: normal;
+	font-weight: bold;
 }
 
 pre.screen strong {