in our app we use the TWebBrowser component of Delphi to display web content. Now we have a problem if windows has scaled monitors, for example 125% scale. In this case some HTML-controls aren't rendert correctly, because the window.devicePixelRatio property in JavaScript isn't updated but stays on 1, althougt it should be 1.25 on a 125% scaled monitor.
Is there any posibillity to fix this issue? From inside JavaScript it is not possible to changes this value, but maybe from the Delphi side?
Edit: I tried out an embedded chromium and there it works fine. But currently it is not possible to move from ie to chromium.
A sample HTML:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100px; height: 25px; border: 1px solid black; border-radius: 4px; overflow: hidden">
<span style="font-size:10pt; white-space: pre">Long sample text</span>
</div>
</body>
</html>
In Embedded IE the text ist cut of
Even though it is obsolete, you will find that enabling FEATURE_96DPI_PIXEL for your application will return the correct pixelratio:
HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
SOFTWARE
Microsoft
Internet Explorer
Main
FeatureControl
FEATURE_96DPI_PIXEL
yourapplication.exe = (DWORD) 00000001
The recommended way is to enable the DOCHOSTUIFLAG_DPI_AWARE flag.
I wanted to use an ascii art for my email signature and it works pretty fine in Gmail, Polymail, and a few other clients. The only exception is the iOS Mail App that will enlarge my ascii code and therefore destroying the image. How can I prevent the Mail App from doing so?
-webkit-text-size-adjust: 100%;
doesn't seem to work any more (neither does -webkit-text-size-adjust: none;) as stated here: How to avoid iOS automatic font size adjustment?
The signature I am trying to get to show properly in iOS Mail app:
<table>
<tbody>
<tr>
<td style="padding: 0; max-width: 400px; font-size: 4px; font-family: monospace; line-height: 3px; color: #000000; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100%;">
++++++=====================================~~~~~~~~~===================================+++++++++++++<br/>+++++================================~~=~=~~~~~~~~~~~~~================================+++++++++++++<br/>++++==============================~~~=~~~~=~~~~~~~=~~~~~~~=============================+++++++++++++<br/>++++===========================~OOOOOOOOOOOOO8OOOOOOOOOOOOO88888O8OO====================++++++++++++<br/>+++=========================~DDDDDDDDDDDDDDDDDDDNNNDNNDDDDDDDDDDDDDDDM8==================+++++++++++<br/>+==========================ODDDDDDDNNNNNNNNNNNDDDDNDDNNNNNNNNDNDNDDDDDDND==================+++++++++<br/>+========================ZNDDDDNNND88DDDDNNNNNNNNNNNNNNNNNDDDDDDDNNNDDDDNDD==============+=+++++++++<br/>+===========$OZZO8====~DNNNDDDNNNNOOO8888DNNNNNNNNNNNNNNNNDDDDDDDDNNNDDDNDNZ+=====OOZOOO===+++++++++<br/>===========ZII$Z8DN===ONDD8DDNNNNNN88888DNDNNNNNNNNNNNNNNDDDNNNNNNNNNNNDNNNNM8===NDZ$IIOO==+++++++++<br/>============~DD8OD==ON8OZZZZOOZMZ8MNNNNNNNDDDD88888888NMNM8DDDDNDDNNNNNMNDD8DDZ~+NODDDN=====++++++++<br/>===============7=ZZZZZOZOOOOOOOOOOOOO8D8DD88DDDDDDDDDDDDDD88DD8OO888OOOOOOOOOZOOOOZO~=======++++++++<br/>==============ZZ:ZZZZZZOOZOOOOOOOOOOOOOOOOOOOOOOOO888888888O888888888OOOOOOOOOOOOZZOO8========++++++<br/>==============Z$~~$I7ZZZZZOOOOOOOOOOOOOOOOOOOOOOOO8888888888O888888OO8OOOOZOOZZ78ZZOOO==========++++<br/>=============$$$7~$~DNNND7ZZZOOOOOOOOOOOOOOOOOOOOO888888OOOOOOOO8OOOOOOOO88NNNNN.ZZOOO==========++++<br/>=============Z$777?O$~?.D,ZNNOOOOOOZOOOOOOOOOOOOOO88OOOOOOOOOOOOOOOOOOONNO.N.$I=8ZZZOO============++<br/>============~Z$77II$NI?Z.88ZZZOOOO$77$ZZOOOOOOOOO8OOOO8OOOOOOOZ$7ZOOOOOOZON.8~DM$$ZZO8I=============<br/>===========~~OO$$7$777Z$?ZZZZZOOOOZZZZZZZZZOZOOOZO$8OOOOOOOOOOOOOOOOOOZZZZZ7OZ$$$ZZO8DI=============<br/>===========~~7OOZOZ?,7$$$$$$ZZZOOOZZZZZZZZZZZZZZZZ8OOOOOOOOOOOOZZZOOOZZZZZ$$77:?O8888$=~~~==========<br/>=======~~~~~~DOZZZZ$Z88OOO$=$$$OO$Z$ZZZZZZZZZZZZZZOOOOOOOOOOZZZZZZOOOZ$7+O88DDDZOO8888~~~~~~~~~=====<br/>=====~=~~~~~~DOOZZZZZMMNMO$88888DDDOOOOOOOOOOO8OOOO88888888O8OOOODDDD8DD8Z8MNMNDOO8888~~~~~~~~=~====<br/>====~~~~~~~~~8OOZZZDOMMMNMNMMMNMMM8OOOOOO8OO88888888888888888888ODMNMNNMMNDMMMMDNOO888+~~~~~~~~~~~~~<br/>=~~~~~~~~~~~~D8OOZNDMMMMNNMMDNMMMMNO88888888888888DD8888888888888NMMNMMNDNNNMMMNNDO888+~~~~~~~~~~~~~<br/>~~~~~~~~~~~~~D8OOZDDMMMMNMMNDMNMNDD$$888888888888DDDDDDD8888DDDIZNNNMNNNMNNMMMMMNDO888+~~~~~~~~~~~~~<br/>~::::::::~~~~D88OZDNMMMNNMNNDNNNO$$7NMMMMMMMMMMMMMMMMMMMMMMMMMM8?ZZZNMNDDNDNMMMMN8O888+~~~~~~~~~~~~~<br/>::::::::::~~~N8888O+DZOOZOOOO8D8$$ONMMMNNNMNNNMMNNNMMNMNNMNNNMMMDI$Z8D888OOOOOO8$O888N?+=~~~~:::::::<br/>:::::::::~~=+DNN8888O??77$$$$$$$$8NNDD8OZ$$$77$$ZOOZZZZZOO88DDNNNMO$ZZZZ$$$7I+OO888DNNI?+=~~::::::,,<br/>,,,,::::~~=+I7MMMMMMMMMMNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNMMMMMMMNNNZ$I?+=~~:::::,<br/>:::~~~=+?7$OOOMNNMNMMMMNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNMMMMMMMM88OOOZ$I?+=~~::<br/>,,,,,:::~~==+?I$Z8DDDDDDDDNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNDDDDD8O$I?+==~~:::,,,,,,,<br/>,,,,,,.............,......,...........,,,,,,,,,,,,,,,,,,...............................,,,,,,,,,,,,,<br/>,,,,,,,,......................................................................,,,,,,,,,,,,,,,,,,,,,,<br/>,,,,,,,,,..,,,,,,....................................................,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,<br/>
</td>
</tr>
</tbody>
</table>
Unfortunately -webkit-text-size-adjust: none|100% only works reliably with font sizes 14px and above. I'm not suggesting you change the design of the ascii art, but might be worth testing a larger font-size just to see if you can successfully negate iOS Mail's text-resizing.
There is an issue OS X where some elements are not displaying the text correctly, even though there are elements alongside it that do show.
Abbreviated example:
Font-face declaration:
#font-face {
font-family: 'FontFamily';
src: src: url(data:application/x-font-woff;...);
font-weight: 700;
font-style: normal;
}
CSS
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: #000;
}
HTML
<div class="navbar-collapse">
<ul class="nav">
<li>Home</li>
<li class="dropdown">
Admin
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
Outcome (missing home link above admin):
A second example where a labels height is messed up but the text is visible within the label. Again renders correctly on non-OS X setups.
The link correctly renders in Chrome/Firefox/IE/Chrome Emulator but it does not render in OS X across all browsers (and iOS).
Is it because you've got the link set to be coloured white on a white background?
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: #000000;
}
Try That :)
Or,
.navbar-collapse > .nav > li > a {
font-family: "FontFamily", sans-serif;
font-weight: 700;
color: initial;
}
After researching this I found that it shouldn't be an issue. However, I would suggest adding the full stack of different font file types. Typically, OTF and TTF are iOS friendly. For my sites, I use the following in order:
eot
svg
eot?#iefix
woff
ttf
This is just my preference and has been tested to work in all browsers/devices. I am sure someone can comment to say that other order may work for them.
I use this code for maximum compatibility, but you have to add all format:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
There is a misspelling in your code:
you've typed "src:" twice
src: src: url(data:application/x-font-woff;...);
Maybe this code will work:
src: url(data:application/x-font-woff;...);
This turned out to be an issue with the y-height was being setup in the font when being embedded (or something along those lines) with font squirrel. Changing the settings around on the vertical metrics option fixed it.
We found an issue with iPhone's rendering of the italic tag. When a font-family is defined for it that differs from its parent's font-family, the italic text renders much smaller than it should. The issue does not appear to occur on all iOS devices, just the iPhone (at least versions 4 - 6).
Test: http://www.eyesforward.com/etc/italic-fail.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: serif;
}
i {
font-family: Arial;
}
</style>
</head>
<body>
<p>
"The freaking thing <i>works</i>," Strong said with amazement, punctuating this key verb with his hands like an orchestra conductor giving a downbeat. "It's beautiful. It does exactly what we wanted it to do."
</p>
</body>
</html>
http://i.stack.imgur.com/Arh20.png
Try setting the font size for the body and italic elements to see if it fixes the issue:
<style type="text/css">
body {
font-family: serif;
font-size: 16px;
}
i {
font-family: Arial;
font-size: 16px;
}
</style>
Then try just setting it for the body and see if the issue is still there. Every browser has it's own style rules it applies to various elements.
Try this:
<style type="text/css">
body {
-webkit-text-size-adjust: none;
}
</style>
I have a weird problem. I'm making a homepage responsive, and the I'm using for the sections headers seems to double itself when viewing on mobile (iOS Simulator)
Here's an image of what happening, because I don't think I can describe it.
And Enhanced...
Now, I thought maybe it was the multiple declarations I did for #media queries, but after making only one query it still happens. Even after getting rid of all other mentions of .sectionHeader it still happens..
Does anyone know how to fix this?
Here's the #media query:
#media only screen and (min-width: 300px) and (max-width: 1024px){
.sectionTitle {
font-family: 'Dancing Script', cursive;
color: #CEB08B;
font-style: normal;
font-weight: bold;
font-size: 40pt;
text-align: center;
letter-spacing: -0.05em; /* Fixes letter spacing issue on iphone */
margin-top: 20px;
}
}
And the HTML:
<h1 class="sectionTitle" style="margin-bottom: 20px;">Videography</h1><br>
Ok, I had to edit this because I (actually) solved it. It was being caused by font-weight: bold;, mainly because the font did not offer a bolded version. Why it decided to copy itself is beyond me.