Javascript mcUITools Styles Explained

Javascript - mcUITools Styles Explained

The purpose of this page is to explain the tools provided via mcUITools js/css

On web pages, users enter data via fields defined with the input tag. There are a few issues with this and a few more browser differences. By setting styles, most of this can be fixed (kludged out of existence).

In order to show before and after, mcUITools.css is not included in the page. Instead a slightly modified version is used where the classname is used to enable individual styles.

Spacing

The most obvious, and easiest to fix, problem with input fields is the text spacing - by default, it is practically touching the left border (in Chrome, like everything this is browser dependent).

	Field	Tag
Default		<input type="text" value="20" size="5" maxlength="6">
Better		<input type="text" value="20" size="5" maxlength="6" style="padding-left: 2px;" >

For the above example, the style is simply placed in the tag. Using mcUITools.css, it is associated with all text and number input fields.

The element specification explicitly says which fields are affected because it should not apply to other input types (such as radio buttons).

input[type="text"], input[type="number"] {
  padding-left: 2px;
}

Sunken effect

I am used to programming in Delphi and like the way the forms look.

Grey background
Sunken data entry fields
Read/Write fields have a white background
Read only fields have a grey background

I have developed a combination of styles and code to produce those effects. The examples below show sunken text and number fields on both a white and a grey background.

Element	Default		Sunken
Element	White	Grey	White	Grey
Select
Text
Readonly

Both the readonly defaults appear to be sunken even though there are no special codes to force it. On a grey background, the lower and right borders are not visible in Chrome because they are the same color as the background. This is "fixed" by setting border-color:. With Firefox, the readonly default on a grey background renders with visible lower and right borders.

The Sunken effect is provided via css - the following also adds padding (a left gap) to the fields and changes the background color of the "readonly" fields.

input[type="text"], input[type="number"] {
  padding-left: 2px;
}

input[type="text"], input[type="number"], select {
  border-style: inset;
  border-width: 2px;
  border-color: #d0d0d0 #dedede #e0e0e0 #e8e8e8;
}

input.mcDisplay {
 width:80;
 box-shadow: 0 0px 0px 0px;
 background-color: #f0f0f0;
 border-color: #d0d0d0 #dedede #fbfbfb #d0d0d0;
}

For this example, I have doctored the style sheet a bit and hard coded some styles directly into the input tags since that is the only was (that I know) to show default and style-modified tags on the same page. For instance, I added class values to all the styles and disabled the width style in mcDisplay (so that the table would look better). Normally, a function sets the readonly properties of all the mcDisplay fields. However, in this example, I included that directly in the input tag.

Readonly vs Disabled

I originally set the disabled property to true to make the field readonly and to change the background color - but the results were browser dependent.

In Chrome, it looked great
In Firefox, the background color was quite different (brownish) and the text font was so light is was difficult to read - totally unacceptable

Both the following fields have the same code .. except for the readonly and disabled parameters.

Comparison of
readonly vs disabled

 <input type="text" value="20" size="5" maxlength="6" readonly
   style="padding-left: 2px; border-style: inset; border-width: 2px;" >

 <input type="text" value="20" size="5" maxlength="6" disabled
   style="padding-left: 2px; border-style: inset; border-width: 2px;" >

Readonly

Disabled

When viewed on various browsers, the lack of consistency (and readability) is obvious.

Screen captures
Browser	Image	Disabled colors		Comments
Browser	Image	Background	Text	Comments
Chrome 49 Windows XP		#ebebe4	#545454	Neither field is sunken The disabled text is readable Font size: 16px/13.3333px
Chrome 50 Windows 10		#ebebe4	#545454	Both fields are raised Font size: 16px/9.33333px
Firefox Windows XP		#ece9d8	#aca899	Both fields are rendered as sunken The disabled text is too hard to read Font size: 16px/13.3333px

Sunken style details

The sunken effect was optimized for a grey background and a Chrome browser running on Windows XP. Unfortunately, the only way to know how these will display in other browsers is to just try it.

In the first 2 sections of following table, each row adds a new style so that the effect of each is visible. In the Compare section, various style combinations are used to make a point (not always obvious). To see the styles for a field, right click it and select inspect.

In Chrome, you can see all the styles - yours and the system defaults.
In Firefox 24, you can only see your styles - the default styles are not displayed

	Style	Background		Comment
	Style	White	Grey	Comment
Read/Write Text				System default
	padding-left: 2px;			This just indents the text a bit
	border-style: inset;			Chrome 49 default, not sunken Firefox 24 renders this as sunken
	border-width: 2px;			Chrome 49 default - no change
	border-color: #d0d0d0 #dedede #e0e0e0 #e8e8e8;			Add shadows, renders as sunken in Chrome 49 No effect in Firefox 24
Readonly	background-color: #f0f0f0;			New background color
	border-color: #d0d0d0 #dedede #fbfbfb #d0d0d0;			Lighten bottom shadow, darken left
	box-shadow: 0 0px 0px 0px;			On Chrome, this makes no difference - big difference with Firefox
Compare	border-color: #d0d0d0 #dedede #fbfbfb #d0d0d0;			Text with readonly shadow, bottom edge hard to see
	box-shadow: 0 0px 1px 0px;			Text with readonly shadow, bottom edge easy to see
	box-shadow: 0 0px 1px 0px;			Text with read/write shadow, bottom edge easy to see - same styles as above - remove or edit
	box-shadow: 0 0px 1px 0px;			Readonly background with read/write shadow, bottom edge easy to see but a bit dark with a grey background

In Firefox 24. border-style: inset; causes the field to render as sunken. In Chrome 49, the border-color: must be set to render the field as sunken.

This table compares the sunken effect colors.

Border	Firefox both	My read/write	My readonly
top	`828177`	`d0d0d0`	`d0d0d0`
right	`f9f8f3`	`dedede`	`dedede`
bottom	`f9f8f3`	`e0e0e0`	`fbfbfb`
left	`828177`	`e8e8e8`	`d0d0d0`

The Firefox values are the defaults used for both the readonly and disabled fields.

Digging deeper into Firefox, there is a jar file that contains the default style sheets. In them, colors are referred to as ThreeDShadow, ThreeDHighlight, ButtonFace, and the like. (Lots of examples) As far as I can tell, these color names are internal only and not supported by any standard. There is also a proposal that CSS provide variables to help solve this problem - but it has not been implemented.

border-style: inset;border-width: 2px; is the Chrome default on Windows XP.

 <input type="text" value="20" size="5" maxlength="6" 
   style="padding-left: 2px;border-style: inset;border-width: 2px;
          border-color: #d0d0d0 #dedede #e0e0e0 #e8e8e8;" >

 <input type="text" value="20" size="5" maxlength="6" 
   style="padding-left: 2px;border-style: inset;border-width: 2px;
          border-color: #d0d0d0 #dedede #e0e0e0 #e8e8e8; font-size:13.33px" >

Default

13.33px

Unfortunately, CSS does not provide a way to make the fonts in one style the same as that in another. Therefore, I could use javascript.

Read the font size of the first p-tag
Apply it to all the rest of the tags

I would prefer to use CSS, but there does not appear to be a generic way to fix this .. primarily because if I set the font size using pixels, then IE 6 (and earlier) users won't be able to resize the page. (I am assuming that this is a "don't care" - IE 6 is pretty old and does not support some of the other features I want.)

For text on the page

Style

Chrome 49
XP

Firefox 24
XP

Microsoft Edge
Windows 10

IE 11
Windows 10

Chrome 50
Windows 10

font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-weight

'Times New Roman'
auto
16px

normal
normal

normal
normal

serif
[blank] 
16px
none
normal
normal
[blank]
normal
400

serif
[blank] 
16px
none
normal
normal
[blank]
normal
400

'Times New Roman'

12pt (16px)


normal

normal
400

'Times New Roman'
auto
16px  medium

normal
normal

normal
normal

For text in an input field

Style

Chrome 49
XP

Firefox 24
XP

Microsoft Edge
Windows 10

IE 11
Windows 10

Chrome 50
Windows 10

font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-weight

height

Arial
auto
13.3333px

normal
normal

normal
normal

22px

MS Shell Dlg
[blank]
13.3333px 
none 
normal 
normal 
[blank]
normal
400

22px

MS Shell Dlg

13.33px 
none 
normal 
normal 

normal
400

21.09px

MS Shell Dlg

10pt (13px)


normal

normal
400

auto

Arial
auto
9.33333px

normal
normal

normal
normal

16px

It should be obvious

With Windows XP, and Microsoft Edge in Windows 10, the font in the input fields is about 3 pixels smaller than normal text
With Chrome 50 in Windows 10, the font is about 7 pixels smaller
With IE 11 in Windows 10, the font is 10 points (not pixels) which is 2 points smaller than the text font of 12 points

According to this chart,

12 pt = 16 px = 1 em
10 pt = 13 px = 0.8 em

which I have added in parentheses in the above tables.

So - Is the problem Windows, Chrome, or something else? I don't have enough data points to make a claim. Whatever it is - It Sucks!!

I used IE and Microsoft Edge with Windows 10 simply to add additional data points. Since neither has the same problem as Chrome 50, it seems pretty obvious that the problem is Chrome - period. However, many other programs (not mentioned here) work fine in Windows XP but also have font size problems with Windows 10. Therefore, I am still not sure where to place the blame.

Again, the basic rule is - Don't trust the defaults!

Other Components

These UI components have a font size problem with Chrome 50.

input, textarea, select, button

The mcUITools style sheet "fixes" (kludges) that problem with the following.

/* This is needed for Chrome 50 on Windows 10, font size would be 9.33333px without this */
input[type="text"], input[type="number"], input[type="button"], select, textarea, button {
  font-size:13.3333px;
}

While the textarea and 2 buttons have adequate spacing, the style sheet also renders textarea components as sunken.

3 additional components

Control

Default Code

Default

Sunken and size=13.33px


<textarea rows="5" cols="25">
  text here
</textarea>

<button type="button">Click Me!</button>

<input type="button" value="Input Button">

Chrome CSS Confusion

Using Chrome to inspect page elements, the input tags are given as

input[type="text" i] { tags go here }

I was never able to find out what the -i- meant. With Firefox, it produces

Expected ']' to terminate attribute selector but found 'i'.  Ruleset ignored due to bad selector.

As a result - I removed the "extra" i's.

References

Convert points to pixels

Very useful chart

Default Font Display size too small

Others have the same problem (starting in 2008, and I am writing this in 2016). One post states

the Chrome browser is based on WebKit. There are some webkit internal font setting options for font family, font size, etc.

It goes on to suggest that the parameters can be modified at

Documents and Settings\[username]\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences

but I never found the necessary text

Chrome Should respect monitor DPI settings

More people complaining about the Chrome font size problem since 2009.

Author: Robert Clemenzi