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.
I want to plot a horizontal bar graph behind a time series with Highstocks/Highcharts, similar to how volume is shown versus price in blue here. Having done some digging, I don't believe this is possible with Highcharts, as a bar graph basically inverts the x- and y-axes, and so I couldn't have time as an x-axis running along the bottom and price as an x-axis running vertically. Am I right about this?
There is no built in option to achieve this.
You could potentially dummy the bar series by using the polygon series type.
I have achieved this in the past by creating two charts, with their containing divs positioned so that they appear as if they are the same chart.
HTML:
<section id="wrapper">
<div id="line-chart"></div>
<div id="bar-chart"></div>
</section>
CSS:
#wrapper {
position:relative;
margin:1em auto;
padding:0;
width:900px;
}
#line-chart {
margin:0;
padding:0;
height:400px;
}
#bar-chart {
position:absolute;
top:0;
right:0;
width:200px;
height:400px;
margin:0;
padding:0;
}
Working Example:
http://jsfiddle.net/jlbriggs/r2Lvo2dw/
(this example automatically builds a histogram out of the line data provided)
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.
EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.
I am trying to align a ui-icon from a jquery theme to the right of a textbox element with no luck.
I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.
Shouldn't a span just render the html inline anyway, right where I put it on the page?
<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>
You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?
<head>
<style type="text/css">
.tdd{
width: 50px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
</table>