Questions / issues that pertain to building pages for the DI Application



Menu tabs

The menu tabs now expand to contain the text within them (for lengthy translations). There can be from one to 5 tabs (actually more with some simple tweaks). The display issue is resolved and tabs respond quickly to rollovers.

Documentation of Tab Menu coding: Tab Menu documentation

Icons

The icons have all been rebuilt using sprites. Rollovers are instantaneous and the text and icon are simulaneous. The text can be edited.

The icons are implemented as styles applied to buttons. This should make it easy to translate to the application when needed.


Modal

How are modal screens to be implemented? Will a modal screen be a stand-alone web page that is loaded into a "modal" window?


The suggested jQuery approach seems to consist of using the contents of a DIV tag to contain the modal window.


A discussion of the actual mechanics of how this is to be constructed will help me build appropriate pages and styles.









The text that appears below is for testing the availability of the Segoe typeface in all its styles. It should be noted that Segoe UI is a Microsoft typeface not licensed for use anywhere but in Internet Explorer. This DI project will display correctly in IE if Segoe is installed on the system but any other browser is a different matter. Firefox does not display Segoe. I have included the Google font "Noto Sans" to try to compensate but this is not a good solid fix. More research will be needed.

The font size is set to 62.5% so that setting ems can be more logical. What this means is that with font-size set to 62.5% setting 1.2em is the same as setting text to 12px. 1.4 em = 14px, 1.8em = 18px etc...





The following text examples are using the default font which is set like this: html {font-family:"Segoe UI", "Noto Sans", sans-serif;}

Reference text 36pxReference BOLDReference text ITALIC
Reference text 28pxReference text BOLDReference text ITALIC
Reference text 20pxReference text BOLDReference text ITALIC
Reference text 18pxReference text BOLDReference text ITALIC
Reference text 14px Reference text BOLDReference text ITALIC
Reference text 12pxReference text BOLDReference text ITALIC

The following text examples are using the specific typeface that is listed. The default font(s) will apply if the specific face is not available (in theory)

Segoe UI - 1.8em - normalThis text is BOLDThis text is ITALIC
Segoe UI - 1.8em - 400This text is BOLDThis text is ITALIC
Segoe UI - 1.8em - 700This text is BOLDThis text is ITALIC
Segoe UI Light 1.8emThis text is BOLDThis text is ITALIC
Segoe UI Semibold 1.8emThis text is BOLDThis text is ITALIC
Segoe UI Symbol 1.8emThis text is BOLDThis text is ITALIC

h1

h2

h3

h4

h5
h6

For future reference: using percentages to set text size is not a good solution, use EMs instead. Of course, you can always set all text sizes to pixels but that will take a lot of editing and will not allow future scaling.