Editor Fonts and Colors Review

Author: Stepan Doubrava

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

Content

Sample Files

 

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:

Category
Color RGB / Font Style
Comment
#969696
Error
_ black_text_red_underline _
Current line
background: #E9EFF8
Selected text
background: #B0C5E3
Matching parentheses
background: #F3FF0F
Non-matching parentheses
background: red

 

 

 

 

 

 

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.

Category
Color RGB / Font Style
Javadoc HTML tag
#969696 / bold italic
Javadoc tag
#969696 / bold

 

 

 

 
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.

Category
Color RGB / Font Style
String
#CE7B00
String escape seq.
#CE7B00 / bold
Character
#CE7B00
Number
black

 

 

 

 

 
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.

Category
Color RGB / Font Style
Error
_ black_text_red_underline _
Warning
_ black_text_yellow_underline _
Unused
_ black_text_grey_underline _
Deprecated
_ black_text_brown_underline _

 

 

 

Preprocessor commands/blocks
Category
Color RGB / Font Style
Preprocessor commands
#666666
Inactive Preprocesor Block
background: #DFDFDF
Inactive Preprocesor Blockon on current line
background: #E3E5E9
Inactive Preprocesor Block selected
background: #CCD5E1
Active Preprocesor Block
background: #D0E8CA
Active Preprocesor Block on current line
background: #BAD6B4
Active Preprocesor Block selected
background: #81B48F

 

 

 

 

 
 
 
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.

Category
Color RGB / Font Style
Keywords
#0000E6
Fields (using)
#009B00
Static Fields (using)
#009B00 / Italic

 

 

 

 

Dynamic fields
Category
Color RGB / Font Style
Guarded block
background: #DFDFDF
Guarded block on on current line
background: #E3E5E9
Guarded block selected
background: #CCD5E1
Dynamic context events
background: #FFB442

 

 

 

 
 
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.

Category
Color RGB / Font Style
Doxygen HTML tag
#969696 / bold italic
Doxygen tag
#969696 / bold
String
#CE7B00
String escape seq.
#CE7B00 / bold
Character
#CE7B00
Number
black
Keywords
#0000E6
Preprocessor commands
#009B00
Error
_ black_text_red_underline _
Warning
_ black_text_yellow_underline _
Inactive Preprocesor Block
#969696
Active Preprocesor Block
none

 

 

 

 
 

 

 

 

 

 
 

 

 

 
Assembler

Sample Assembler code using proposed colors can be found here.

Category
Color RGB / Font Style
String
#CE7B00
Number
black
Directive
#0000E6
Instruction
#009B00
Register
Black/Bold

 

 

 

 
 

 

HTML

Sample HTML code using proposed colors can be found here.

Category
Color RGB / Font Style
Tag
#0000E6
Argument
#009B00
Value
#CE7B00
Character (Reference)
black
SMGL declaration
#628FB5
CSS
background: #D0E8CA
CSS on current line
background: #BAD6B4
CSS selected
background: #81B48F

 

 

 

 

 
 
 

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.

Category
Color RGB / Font Style
Selector
#0000E6
Argumetn Value
#CE7B00
Argument Name
#009B00

 

 

 


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.

Category
Color RGB / Font Style
Tag
#0000E6
Jsp Tag
#0000E6/Bold
Jsp Directive
#0000E6/Bold
Argument name
#009B00
Argument value
#CE7B00
JSP Comment
#969696
HTML Comment
#969696
Expression language, JavaScript, CSS
background: #D0E8CA
Expression language , JavaScript, CSS on current line
background: #BAD6B4
Expression language , JavaScript, CSS selected
background: #81B48F

 

 
 
 
 
 

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.

Category
Color RGB / Font Style
Element name
#0000E6
Attribute name
#009B00
Attribute value
#CE7B00
CDATA
background: #D0E8CA
CDATA on current line
background: #BAD6B4
CDATA selected
background: #81B48F

 

 

 


 
 
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.

Category
Color RGB / Font Style
Keyword
#0000E6
Identifyer
#009B00
Value
black

 

 

 

Java Script

Sample Java Scriptcode using proposed colors can be found here.

Category
Color RGB / Font Style
Keyword
#0000E6
Regular expression
#9933CC
Function declarations
Black/Bold
Global Variable
#009B00
String
#CE7B00

 

 

 

 

 

 

RUBY

Sample RUBY code using proposed colors can be found here.

Category
Color RGB / Font Style
Keyword

#0000E6

Sybmol
#2E92C7
Constant
black/Italic
Global
black/Bold+Italic
Method
#009B00
Regular expression
#9933CC
String
#CE7B00
Character
#CE7B00

 

 

 

 

 

 

 

 


Properties file

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

Category
Color RGB / Font Style
Key
black
Value
#CE7B00

 

 

 

 

Project Features

About this Project

ui was started in November 2009, is owned by Jiří Kovalský, and has 43 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20160708.bf2ac18). © 2014, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close