HA Styles

Visual styling in HA is mostly controlled by the server directly setting styles, rather than using CSS classes. This makes it harder to apply custom styles to the application.

Many of our users using Entire Connection e.g. make standard text turquoise to make it more visually distinct from intensified text.

e.g.

a list of document numbers wiith intensified entry at the top


the same list on HA's default emulator.css stylesheet


Making each of the Natural style attributes a CSS class would make it easier to write custom stylesheets that change the style of page elements with these properties.

e.g.

<div class="turquoise intensified"> ... </div>

.turquoise {
    color: turquoise;
}
.turquoise.intensified {
    color: cyan;
}
/* 
 * On an old CRT "intensified" means "brighter" not "bold"
 * The bold face in Lucida Console is not different enough from the regular
 * PLUS it's a different width which causes alignment issues
 */

HA Style

AD styles

CD styles

The main observation here is that the colourscheme is fixed apart from the neutral colours.
This makes it hard to customize the colourscheme, e.g. for red/green colourblind users.

Field Styles

Suggested Style Implementation

• Assign a class to each visual style attribute

• Apply these as classes to display elements

• Use CSS to style them

e.g.

<div class="turquoise reverse"> ... </div>
<div class="green intensified"> ... </div>

reverse {
  color: black;
}

intensified {
  color: white; /* normal colour being a grey */
}

turquoise {
  color: turquoise;
}
turquoise.intensified {
  color: cyan;
}
turquoise.reverse {
  background-color: turquoise;
}

green {
  color: green;
}
green.intensified {
  color: lime;
}
green.reverse {
  background-color: green;
}

/* continue for other colors */

cursive {
  font-style: italic;
}
underlined {
  text-decoration-line: underline;
}
non-display {
  visibility: hidden;
}

Styles for the input boxes as well would allow visual distinction of qualities like being mandatory, full length but not yet being full (with some javascript), or having the MARK (since cursor size is much smaller as a bar rather than a block). (The 3270 terminal does allow styling inputs the same way as output ; our application uses colour for a number of inputs to distinguish them).

Rendering

Text Style

Map Editor

Here we have the N1 map editor's rendering of all 49 visual style combinations for output fields.


There is no doubt some consideration here for an editor needing to display things like hidden text, but we do also see that there is a curious bug in that "neutral by default" text is rendered black but "explicitly neutral" text is rendered as white.

Most notably the N1 map editor uses colour to portray "intensity" and not font.

HA

Here is HA's rendering of the same map


• Cursive : we can see a little clipping of the digits, particularly the 8.

  • This can be alleviated with different font choices like e.g. JetBrains Mono

• Intensified : HA uses font rather than colour and the difference is quite hard to see in most of the colours

  • (see  ; the top row is intensified and virtually indistinguishable from the other rows in the default Lucida Console font)

  • Colour differences are much more apparent - as we can see on the blinking text which is halfway through it's cycle

• Reversed video lacks colour : you'd expect the background to be the selected foreground colour

HA on the mainframe differs from HA on LUW in that it does not render the non-display elements in the page at all, but LUW+HA renders these elements but disables their display with style.

Input Boxes


Here we see that output-only and protected boxes are rendered as output elements (<div>) rather than input elements (<input>). This means that auto-testing dynamically protected boxes requires logic to detect both styles of element and behave differently depending on the element used.