How to disable iOS Mail App text enlargement - ios

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.

Related

Font rendering different on chrome for PC and chrome for iOS

Working on this page: https://solderless.github.io
The title looks like this on my phone (using chrome / ios 10):
And like this on my desktop:
As you can see, the iOS version seems stretched horizontally (the 2 bars that make the L do not have the same weight for instance)
This is using Google font for delivering the fonts and the CSS is fairly simple:
h1,h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
h1 {
font-size: 40px;
}
Any idea what could make the difference disappear?

One word looks like two on iPad, but one on Desktop. (That's hard to say)

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.

Windows Phone set font-size for Thai in css

I have to show Thai and Roman text in a WebView (with NavigateToString). In CSS I've defined the font-sizes for Roman as 1.0em and for Thai as 1.8em. But Thai is displayed very small, smaller than Roman. If I set the font-size for Thai to 8em, then the result is about I want to have.
OK, I can set the font-size to 8.0. But if this wrong behavior an bug in the OS, and Microsoft correct it in the next version, then my customers will have Thai script in 800% that fills up the screen.
Is this a bug in the OS? Or am I missing something obvious?
Edit: this is the generated html
<html>
<head>
<title>ClickThai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.Text { font-size: 1.0em}
.News { font-size: 1.0em; font-weight: bold; color: #333333}
.ThaiText { font-size: 2.0em; line-height: 2.2em;}
.TTiT { font-size: 1.0em; line-height: 1.3em;}
.Tones { font-size:80%; position:relative; bottom: 0.1em; letter-spacing: -0.15em; color: #FF0000;}
.Tonex { font-size:80%; position:relative; bottom: 0.1em; letter-spacing: -0.15em; color: #00FF00;}
.NoWrap { white-space:nowrap;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#00FF00">
<p class="ThaiText">ไก่</p>
</td>
</tr>
</table>
<p class="News">Transcription</p>
Description
</body>
</html>
It works on Internet Explorer and other browsers. Not in WebView on Windows Phone.

now I have found out that the problem is elsewhere.
My Thai text will be displayed in a table (just to colorize the background). And there lies the problem: the class definition in tables does not work as expected. This also applies to Roman text.
The text size is about 25% of the defined value. Outside tables everything is in order.

Because my app is an universal app I have added my code to the Windows 8.1 area.
There the size specifications are correctly rendered.
Conclusion: The code is error-free, but there is a bug in Windows Phone 8.1 when rendering the css font sizes within html tables.

How do sprites work in jqmobile?

I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?

The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.

Sifr3 extra padding around replaced element

I am using sifr3 to replace a few headings. One of them has a background color.
The normal page css has h2 padding set to 0, the sifr css has the same for the replaced h2, anf the sifrconfig.js has the same, yet there still appears to be padding, slighly more on the bottom.
main css:
h2 {
font-size: 22px;
margin-bottom: 30px;
padding:0;
background-color: #339999;
width: 280px;
}
sifr css:
.sIFR-active h2 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 22px;
}
sifrconfig.js:
sIFR.replace(rockwell, {
selector: 'h2',
forceSingleLine: true,
css: [
'.sIFR-root { color:#FFFFFF; font-size: 22px; letter-spacing:-0.87; background-color: #339999; text-align: left; margin:0; padding:0;}',
]
});
Any ideas? This is driving me mad!
EDIT just worth mentioning, there is no inline styles or any other css that would override anything, and using web developer toolbar, it shows the flash movie has the extra height, not the containing h2.

Hey, I had a similar problem where I had some extra padding at the bottom which was at the bottom of the H2 tag I was trying to convert SIFR.
I found my issues was related to the doc type I was using.
I was using an XHTML Strict and when I changed it to a transitional doc type the padding was removed.
I hope this helps people, I wasted a day and went completely f-ing mental trying to track it down and fix it.

Yea, Flash does that at times. You can use the tuneHeight parameter to make the movie less high. There's also tuneWidth, offsetTop and offsetLeft.

Resources