Editor Fonts and Colors Review

Author: Stepan Doubrava

$Revision: 1.53 $
$Date: 2007/11/05 17:50:17 $

Content

• Font
  • Objectives
  • Font Specification
• Colors
  • Objectives
  • Colors Specification
  • Common
  • JAVA
    • Comments
    • Usage of Bold font
    • Strings, Characters, Numbers
    • Errors, Warnings, Unused, Deprecated
    • Preprocessor commands/blocks
    • Others
    • Dynamic fields
  • C/C++
  • Assembler
  • HTML
  • CSS
  • JSP
  • XML
  • SQL
  • Java Script
  • RUBY
  • Properties

Sample Files

• JAVA
• C++ Header / C++ Source
• ASSEMBLER
• HTML
• CSS
• JSP
• XML
• SQL
• Java Script
• RUBY
• Properties

Font

Objectives

We want to replace default font for the editor to avoid letters bleeding into each other. Current default font is "Monospaced 12" which renders as "Courier New 12" with wider spacing on standard Windows instalation.

Font Specification

We can avoid letters bleeding into each other by choosing different font or by enlarging the current font. In the following table we can see comparison between 3 different fonts/sizes where third column shows how many lines of code fits in NB window in 1280 x 800 resolution.

Monospaced 13			33 lines
Courier New 13			39 lines
Bitstream Vera Sans Mono 12			39 lines

The font Monospaced is maped to different fonts on different systems. On Windows it is mapped to "Courier ", on Linux it is mapped to "Lucida Typewriter". Monospaced also covers other characters from Unicode subset which are not included in Courier or Lucida, however some of those extra characters require more vertical space, so the vertical spacing for the whole Monospaced font is bigger.

As a default font for Windows we will choose Courier New 13pt, which doesn't suffer from letters bleeding into each other. Also most Windows users are used to Courier New.

As a default font for Linux we will choose Lucida Typewriter 13pt,

We have rejected Bitstream Vera Sans Mono 12, because it may show unfamiliar to NB users.

We have rejected Monospace 13, because on standard Windows instalation it shows as Courier New 13 with wider spacing and therefore if fits fewer lines on the page .

Colors

Objectives

Users complain that the current code is too colorful and felt like the colors were chosen randomly without considering aesthetics. Some users didn't understand that unused variable is greyed-out and thought of it as a bug. Also current code contains lots of bold, which is hard to read and should be used only rarely to emphasize important facts in the documents.

Colors Specification

Here we design default scheme which will be named NetBeans. After few iterations of this document we have agreed that expert users might find this scheme insufficiend regarding editor abilities, so we have designed second scheme called NetBeans Expert which can be found here

Common colors

There are some colors common for all the file types:

Where "Current line" and "Selected text" colors should work as filter or semi transparent foil, therefore it has slightly different shade in fields like "Embedded content" etc.

Java

Sample JAVA code using proposed colors can be found here.

Comments

Should appear unified, therefore we will distinguish different categories within comments (Javadoc tag etc.) by changing font style, but maintain the same color.

Usage of Bold Font

We want to use bold font only for class name and methods declarations. This visually emphasize where the declaration of a new method starts and divides the file.

Strings, Characters, Numbers

By default we will use same color for strings and characters and black for numbers. It would be useful to have numbers marked by different color when dealing with complicated expressions, but this is not a case of common user and can always be changed explicitly.

Errors, Warnings, Unused, Deprecated

We are introducing a rule, where all the places which needs fixing or some attention will we underlined by wavy line. This should fix the problem where users think of a unused filed (currently greyed out) as comment. Ultimately all the waves should be removed from the code by fixing the issues. On the places, where for some reason the wavy lines might remain we have chosen a non-irritating color. This will also fix a problem with bad readability of deprecated fields which is currently striked out. Overall advantage of this approach is that the marking of places which need some user action is unified. Also, for this rule to work it is crutial to have working tooltiop on the wavy line, so when users don't understand the meaning of the markup and hoovers over it, IDE instantly comes up with the explenation.

Preprocessor commands/blocks

Others

We will mark usage of the fields so the user is aware of actions changing state of the class. We are using black for declaration of (Static) field because when marked green the upper part, of the file would be too colorful.

Dynamic fields

C/C++

C/C++ Syntax should be much like a Java except some tokens. Sample C++ code using proposed colors can be found here: source / header.

Assembler

Sample Assembler code using proposed colors can be found here.

HTML

Sample HTML code using proposed colors can be found here.

Additional comments

• In this file type we won't mark both matching parantheses, only the other one, because when modifying the opening tag, which can be quite long, it would be marked green.

CSS

Sample CSS code using proposed colors can be found here.

Additional comments

• This scheme stands for stand alone CSS file. When CSS is included in the HTML it has different background see HTML.

JSP

Sample JSP code using proposed colors can be found here.

Additional comments

• In this file type we won't mark both matching parantheses, only the other one, because when modifying the opening tag, which can be quite long, it would be marked green.

XML

Sample SQL code using proposed colors can be found here.

Additional comments

• In this file type we won't mark both matching parantheses, only the other one, because when modifying the opening tag, which can be quite long, it would be marked green.

SQL

Sample SQL code using proposed colors can be found here.

Java Script

Sample Java Scriptcode using proposed colors can be found here.

RUBY

Sample RUBY code using proposed colors can be found here.

Properties file

Sample Properties file code using proposed colors can be found here.