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 36px | Reference BOLD | Reference text ITALIC |
| Reference text 28px | Reference text BOLD | Reference text ITALIC |
| Reference text 20px | Reference text BOLD | Reference text ITALIC |
| Reference text 18px | Reference text BOLD | Reference text ITALIC |
| Reference text 14px | Reference text BOLD | Reference text ITALIC |
| Reference text 12px | Reference text BOLD | Reference 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 - normal | This text is BOLD | This text is ITALIC |
| Segoe UI - 1.8em - 400 | This text is BOLD | This text is ITALIC |
| Segoe UI - 1.8em - 700 | This text is BOLD | This text is ITALIC |
| Segoe UI Light 1.8em | This text is BOLD | This text is ITALIC |
| Segoe UI Semibold 1.8em | This text is BOLD | This text is ITALIC |
| Segoe UI Symbol 1.8em | This text is BOLD | This 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.