Bug 493667 - [HiDPI] Workaround Internet Explorer font scaling bug
Problem:
The Microsoft Internet Explorer (and probably also legacy non Chromium
based Microsoft Edge versions) does scale system fonts (for instance
"font: icon") much too large on high-DPI displays, if no font size is
specified. This affects the Eclipse embedded help on Windows, since on
Windows the browser widget currently uses the Internet Explorer by
default.
In addition, "font: icon" without a font size affects also the
Infocenter since different browsers display it in different sizes. On
Windows 10, on my computer "font: icon;" without a font size is
displayed in Chrome and Edge in the font size 16px, on the same computer
it is displayed in IE and Firefox in 12px by default. Firefox and IE use
the system font used to label icons, but in Chrome changing the system
icon font does not change the font in the browser (note, in Windows 10
the UI to change the icon font and other fonts has been removed, so only
the general font size can be set without editing the registry). On the
iPad the font size seems to be 14px and on an Android smartphone it
seems to be 16px (Chrome) and 12px (Firefox).
The original idea to use "font: icon" without a font size to get as
close to the system look as possible does not seem to work anymore due
to the mentioned IE bug on high-DPI displays and the lack of support of
it in Chrome (including Microsoft Edge).
Solution:
As a compromise, add "0.875 rem" everywhere where "font: icon" and
"font: message-box" is used, which is 14px, as long as the default text
size of the web browser of 16px is not changed. This will change the
font size in most cases, but in each of these cases only a little bit
(either +2px or -2px).
Change-Id: Ic92118c37b2ba7eedcbc87e72e08d59cb727e525
Signed-off-by: Holger Voormann <eclipse@voormann.de>
diff --git a/org.eclipse.help.webapp/advanced/advanced.jsp b/org.eclipse.help.webapp/advanced/advanced.jsp
index e5058c5..d0887c1 100644
--- a/org.eclipse.help.webapp/advanced/advanced.jsp
+++ b/org.eclipse.help.webapp/advanced/advanced.jsp
@@ -39,6 +39,7 @@
BODY {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
background:<%=prefs.getToolbarBackground()%>;
border:1px solid ThreeDShadow;
padding:0px;
@@ -47,6 +48,7 @@
TABLE {
font:<%=prefs.getViewFont()%>;
+ font-size: .875rem;
background:<%=prefs.getToolbarBackground()%>;
}
@@ -73,6 +75,7 @@
border:1px solid ThreeDShadow;
width:100%;
font:icon;
+ font-size:.875rem;
}
#booksContainer {
@@ -89,6 +92,7 @@
.button {
font:<%=prefs.getViewFont()%>;
+ font-size: .875rem;
}
<%
diff --git a/org.eclipse.help.webapp/advanced/breadcrumbs.css b/org.eclipse.help.webapp/advanced/breadcrumbs.css
index 2c787f0..f0df3d3 100644
--- a/org.eclipse.help.webapp/advanced/breadcrumbs.css
+++ b/org.eclipse.help.webapp/advanced/breadcrumbs.css
@@ -14,6 +14,7 @@
.help_breadcrumbs {
font: message-box;
+ font-size: .875rem;
margin-bottom: 10px;
}
diff --git a/org.eclipse.help.webapp/advanced/confirmShowAll.jsp b/org.eclipse.help.webapp/advanced/confirmShowAll.jsp
index 7be3008..567a803 100644
--- a/org.eclipse.help.webapp/advanced/confirmShowAll.jsp
+++ b/org.eclipse.help.webapp/advanced/confirmShowAll.jsp
@@ -62,6 +62,7 @@
BUTTON {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
}
</style>
diff --git a/org.eclipse.help.webapp/advanced/deferredView.css b/org.eclipse.help.webapp/advanced/deferredView.css
index c1fdf71..2e5ed29 100644
--- a/org.eclipse.help.webapp/advanced/deferredView.css
+++ b/org.eclipse.help.webapp/advanced/deferredView.css
@@ -14,6 +14,7 @@
body {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
color: WindowText;
margin-top: 8px;
margin-left: 10px;
diff --git a/org.eclipse.help.webapp/advanced/indexView.css b/org.eclipse.help.webapp/advanced/indexView.css
index c7eea76..cc5e67c 100644
--- a/org.eclipse.help.webapp/advanced/indexView.css
+++ b/org.eclipse.help.webapp/advanced/indexView.css
@@ -18,6 +18,7 @@
BODY {
<%=prefs.getViewBackgroundStyle()%>
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
margin-top:5px;
margin-<%=isRTL?"right":"left"%>:5px;
padding:0px;
@@ -34,6 +35,7 @@
TABLE {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
width:100%;
}
@@ -44,6 +46,7 @@
INPUT {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
margin:0;
padding:0;
border:1px solid ThreeDShadow;
diff --git a/org.eclipse.help.webapp/advanced/list.css b/org.eclipse.help.webapp/advanced/list.css
index a80e0cd..a6361b5 100644
--- a/org.eclipse.help.webapp/advanced/list.css
+++ b/org.eclipse.help.webapp/advanced/list.css
@@ -15,6 +15,7 @@
BODY {
color:WindowText;
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
margin-top:5px;
margin-<%=isRTL?"right":"left"%>:5px;
padding:0;
@@ -42,6 +43,7 @@
TABLE {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
width:100%;
}
diff --git a/org.eclipse.help.webapp/advanced/quickSearch.jsp b/org.eclipse.help.webapp/advanced/quickSearch.jsp
index 956ebb4..920029b 100644
--- a/org.eclipse.help.webapp/advanced/quickSearch.jsp
+++ b/org.eclipse.help.webapp/advanced/quickSearch.jsp
@@ -36,7 +36,8 @@
}
BODY {
- font:<%=prefs.getViewFont()%>;
+ font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
background-color: <%=prefs.getToolbarBackground()%>;
color:WindowText;
}
@@ -67,8 +68,8 @@
BUTTON {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
margin:5px;
- font-size:1.0em;
}
FORM {
diff --git a/org.eclipse.help.webapp/advanced/searchList.css b/org.eclipse.help.webapp/advanced/searchList.css
index 20e348c..9632ff6 100644
--- a/org.eclipse.help.webapp/advanced/searchList.css
+++ b/org.eclipse.help.webapp/advanced/searchList.css
@@ -16,6 +16,7 @@
<%=prefs.getViewBackgroundStyle()%>
color: WindowText;
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
padding: 0px;
border: 0px;
margin-top: 5px;
@@ -27,6 +28,7 @@
table {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
width: 100%;
table-layout: fixed;
}
diff --git a/org.eclipse.help.webapp/advanced/searchScoped.jsp b/org.eclipse.help.webapp/advanced/searchScoped.jsp
index 36a1b23..8c629a2 100644
--- a/org.eclipse.help.webapp/advanced/searchScoped.jsp
+++ b/org.eclipse.help.webapp/advanced/searchScoped.jsp
@@ -45,6 +45,7 @@
TABLE {
background:<%=prefs.getToolbarBackground()%>;
font: <%=prefs.getToolbarFont()%>;
+ font-size: .875rem;
margin: 0px;
padding: 0px;
height:100%;
@@ -58,14 +59,11 @@
INPUT {
font: <%=prefs.getToolbarFont()%>;
+ font-size: .875rem;
margin:0px;
padding:0px;
}
-INPUT {
- font-size: 1.0em;
-}
-
A {
color:WindowText;
text-decoration:none;
diff --git a/org.eclipse.help.webapp/advanced/searchSimple.jsp b/org.eclipse.help.webapp/advanced/searchSimple.jsp
index e74c247..9d7e80a 100644
--- a/org.eclipse.help.webapp/advanced/searchSimple.jsp
+++ b/org.eclipse.help.webapp/advanced/searchSimple.jsp
@@ -44,6 +44,7 @@
TABLE {
font: <%=prefs.getToolbarFont()%>;
+ font-size: .875rem;
background:<%=prefs.getToolbarBackground()%>;
margin: 0px;
padding: 0px;
@@ -58,11 +59,11 @@
INPUT {
font: <%=prefs.getToolbarFont()%>;
+ font-size: .875rem;
margin:0px;
padding:0px;
}
-
#searchTable {
padding-<%=isRTL?"right":"left"%>:5;
}
diff --git a/org.eclipse.help.webapp/advanced/tocTree.css b/org.eclipse.help.webapp/advanced/tocTree.css
index 9537507..92150b5 100644
--- a/org.eclipse.help.webapp/advanced/tocTree.css
+++ b/org.eclipse.help.webapp/advanced/tocTree.css
@@ -14,6 +14,7 @@
BODY {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
margin-top:2px;
margin-<%=isRTL?"right":"left"%>:5px;
padding:0;
diff --git a/org.eclipse.help.webapp/advanced/toolbar.jsp b/org.eclipse.help.webapp/advanced/toolbar.jsp
index a3fc3af..1d06927 100644
--- a/org.eclipse.help.webapp/advanced/toolbar.jsp
+++ b/org.eclipse.help.webapp/advanced/toolbar.jsp
@@ -324,6 +324,7 @@
menu.style.top = "0px";
menu.style.background = "<%=prefs.getToolbarBackground()%>";
menu.style.font = "<%=prefs.getToolbarFont()%>";
+ menu.style.fontSize = ".875rem";
menu.style.border<%=isRTL ? "Right" : "Left"%> = "1px solid ThreeDShadow";
menu.style.borderBottom = "1px solid ThreeDShadow";
@@ -452,8 +453,8 @@
<table id="container" width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" style='padding-<%=isRTL?"right":"left"%>:<%=data.isIE()?"5px":"8px"%>;'>
<tr>
- <td nowrap style="font: <%=prefs.getToolbarFont()%>" valign="middle">
- <div id="titleTextTableDiv" style="overflow:hidden; height:22px;"><table><tr><td nowrap style="font:<%=prefs.getToolbarFont()%>"><div id="titleText" > <%=UrlUtil.htmlEncode(data.getTitle())%></div></td></tr></table>
+ <td nowrap style="font: <%=prefs.getToolbarFont()%>; font-size: .875rem" valign="middle">
+ <div id="titleTextTableDiv" style="overflow:hidden; height:22px;"><table><tr><td nowrap style="font:<%=prefs.getToolbarFont()%>;font-size:1em"><div id="titleText" > <%=UrlUtil.htmlEncode(data.getTitle())%></div></td></tr></table>
</div>
diff --git a/org.eclipse.help.webapp/advanced/tree.css b/org.eclipse.help.webapp/advanced/tree.css
index 1bf8583..e890b1b 100644
--- a/org.eclipse.help.webapp/advanced/tree.css
+++ b/org.eclipse.help.webapp/advanced/tree.css
@@ -14,6 +14,7 @@
BODY {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
margin-top:5px;
margin-<%=isRTL?"right":"left"%>:5px;
padding:0;
diff --git a/org.eclipse.help.webapp/advanced/workingSet.jsp b/org.eclipse.help.webapp/advanced/workingSet.jsp
index 8eac799..b16e0fb 100644
--- a/org.eclipse.help.webapp/advanced/workingSet.jsp
+++ b/org.eclipse.help.webapp/advanced/workingSet.jsp
@@ -43,12 +43,14 @@
BODY {
font: <%=prefs.getViewFont()%>;
+ font-size: .875rem;
background:<%=prefs.getToolbarBackground()%>;
color: WindowText;
}
TABLE {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
background:<%=prefs.getToolbarBackground()%>;
}
@@ -60,6 +62,7 @@
INPUT {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
}
#workingSet {
@@ -132,10 +135,7 @@
BUTTON {
font:<%=prefs.getViewFont()%>;
-}
-
-BUTTON {
- font-size:1.0em;
+ font-size:.875rem;
}
.expanded {
diff --git a/org.eclipse.help.webapp/advanced/workingSetManager.jsp b/org.eclipse.help.webapp/advanced/workingSetManager.jsp
index 4df9d5f..2514d8d 100644
--- a/org.eclipse.help.webapp/advanced/workingSetManager.jsp
+++ b/org.eclipse.help.webapp/advanced/workingSetManager.jsp
@@ -44,6 +44,7 @@
BODY {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
background-color: <%=prefs.getToolbarBackground()%>;
color:WindowText;
}
@@ -65,13 +66,10 @@
BUTTON {
font:<%=prefs.getViewFont()%>;
+ font-size:.875rem;
margin:5px;
}
-BUTTON {
- font-size:1.0em;
-}
-
FORM {
margin: 0px;
border: 0px;
@@ -273,7 +271,7 @@
<body dir="<%=direction%>" onload="onloadHandler()" onunload="closeWorkingSetDialog()" onresize = "sizeList()">
<form onsubmit="selectWorkingSet();return false;">
- <table id="filterTable" cellspacing=0 cellpadding=0 border=0 align=center style="background:<%=prefs.getToolbarBackground()%>; font:<%=prefs.getToolbarFont()%>;margin-top:5px;width:100%;">
+ <table id="filterTable" cellspacing=0 cellpadding=0 border=0 align=center style="background:<%=prefs.getToolbarBackground()%>; font:<%=prefs.getToolbarFont()%>;font-size:.875rem;margin-top:5px;width:100%;">
<tr><td class="radio">
<input id="alldocs" type="radio" name="workingSet" onclick="enableButtons()"><label for="alldocs" accesskey="<%=ServletResources.getAccessKey("selectAll", request)%>"><%=ServletResources.getLabel("selectAll", request)%></label>
</td></tr>
