How do I control font and size on custom HTML page

Discussion Forums > WebViews and HTML for Mobile

Replies: 22 Views: 114

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	confirm \| cancel 11/26/12 11:46 PM (11 years ago) How do I control font and size on custom HTML page Hello, I'm sure I'm missing something really simple, but on 'Custom HTML/Text' screens, I can control bold, italic, horizontal rules etc, but any changes I make to the font and size have no effect whatsoever. Could someone please point me in the right direction? Here is an example of my problem (this one is self-hosted): http://graphics.fangrock.co.uk/buzztouch/text.png Thanks, Darren. Title Comments Hello, I'm sure I'm missing something really simple, but on 'Custom HTML/Text' screens, I can control bold, italic, horizontal rules etc, but any changes I make to the font and size have no effect whatsoever. Could someone please point me in the right direction? Here is an example of my problem (this one is self-hosted): http://graphics.fangrock.co.uk/buzztouch/text.png Thanks, Darren.

LevensGardener Aspiring developer Posts: 220 Reg: Sep 30, 2012 Kendal 10,450	11/27/12 12:02 AM (11 years ago) Hi. Did you select and highlight the text you wanted to change first? This seems to work for me. The other approach might be hitting the source button and finding and changing the references in the HTML tags at the top. That is good if you wanted to change all the text on the page. Comments Hi. Did you select and highlight the text you wanted to change first? This seems to work for me. The other approach might be hitting the source button and finding and changing the references in the HTML tags at the top. That is good if you wanted to change all the text on the page.

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 02:22 AM (11 years ago) This is probably a copy Paste Problem. To really edit Text you should use a real text editor and copy the code directly in the source. You could for example write and edit your text in a joomla or Wordpress editor and copy it from there. Comments This is probably a copy Paste Problem. To really edit Text you should use a real text editor and copy the code directly in the source. You could for example write and edit your text in a joomla or Wordpress editor and copy it from there.

David @ buzztouch buzztouch Evangelist Posts: 6866 Reg: Jan 01, 2010 Monterey, CA 78,840	11/27/12 02:29 AM (11 years ago) Yup..font size is tough on so many different types of devices. The editor is pretty basic. The best way to handle this is usually by clicking the "source" button and modifying as needed. In most cases this means introducing a CSS rule in a paragraph or div tag (or whatever you're using). In looking at the picture, I'm seeing the editor looks "normal" but the content in the device (or simulator) shows a mysterious backslash before all the single apostrophe's. Are you running this on self hosted or buzztouch.com hosted? I'm asking because those should not be there. If they are, something funky's happening with the output and we'll need to look into it. It'll be an easy find / fix. As far the the font size goes, yeah, not as easy as it may appear....depending on tons of things. I generally do what @LeonG mentions...use a REAL editor then copy/paste into the box in the control panel :-) Comments Yup..font size is tough on so many different types of devices. The editor is pretty basic. The best way to handle this is usually by clicking the "source" button and modifying as needed. In most cases this means introducing a CSS rule in a paragraph or div tag (or whatever you're using). In looking at the picture, I'm seeing the editor looks "normal" but the content in the device (or simulator) shows a mysterious backslash before all the single apostrophe's. Are you running this on self hosted or buzztouch.com hosted? I'm asking because those should not be there. If they are, something funky's happening with the output and we'll need to look into it. It'll be an easy find / fix. As far the the font size goes, yeah, not as easy as it may appear....depending on tons of things. I generally do what @LeonG mentions...use a REAL editor then copy/paste into the box in the control panel :-)

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 09:49 AM (11 years ago) Thanks for all your help. I'll have another go later. David, it's self hosted. Comments Thanks for all your help. I'll have another go later. David, it's self hosted.

David @ buzztouch buzztouch Evangelist Posts: 6866 Reg: Jan 01, 2010 Monterey, CA 78,840	11/27/12 02:01 PM (11 years ago) @fangrock: Self hosted...great, this makes it a bit more flexible. Have a look at the plugin folder for the Custom HTML screen. When I made this thing I added a "template.html" file in that directory. That file holds the content you see when you first create one of these screen types. This means that if you want to adjust the style, font, text, whatever....that will appear "by default" when you create a new Custom HTML / Text screen, you can easily modify this template and re-upload it to this plugins directory. Magic :-) Comments @fangrock: Self hosted...great, this makes it a bit more flexible. Have a look at the plugin folder for the Custom HTML screen. When I made this thing I added a "template.html" file in that directory. That file holds the content you see when you first create one of these screen types. This means that if you want to adjust the style, font, text, whatever....that will appear "by default" when you create a new Custom HTML / Text screen, you can easily modify this template and re-upload it to this plugins directory. Magic :-)

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 03:51 PM (11 years ago) @David - I really appreciate your help. I've done what you suggested but still get no styling, here is a new example: http://graphics.fangrock.co.uk/buzztouch/text2.png What I haven't done is tested my hosted account to see if I get the same results. But this has got me thinking, is a custom HTML page the very best way to present text? Should I be using an HTML Doc screen or something else? Thanks! Comments @David - I really appreciate your help. I've done what you suggested but still get no styling, here is a new example: http://graphics.fangrock.co.uk/buzztouch/text2.png What I haven't done is tested my hosted account to see if I get the same results. But this has got me thinking, is a custom HTML page the very best way to present text? Should I be using an HTML Doc screen or something else? Thanks!

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 03:55 PM (11 years ago) Not sure why you dont try a real editor and copy paste, but ok. Paste the code in the source file please and I will send you the correct one, just to get you more into this. You can give docs a try too if that is easier for you yes. Comments Not sure why you dont try a real editor and copy paste, but ok. Paste the code in the source file please and I will send you the correct one, just to get you more into this. You can give docs a try too if that is easier for you yes.

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 04:00 PM (11 years ago) @Leon - I did take your advice earlier! By the time my document gets to the simulator, font and size have been stripped out, bolds and italics remain. There must be something wrong with my self hosted installation as even editing the template as David suggested didn't work. Comments @Leon - I did take your advice earlier! By the time my document gets to the simulator, font and size have been stripped out, bolds and italics remain. There must be something wrong with my self hosted installation as even editing the template as David suggested didn't work.

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 04:03 PM (11 years ago) I do not think there is anything wrong with your install. Just paste us some code of your text here. Comments I do not think there is anything wrong with your install. Just paste us some code of your text here.

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 04:15 PM (11 years ago) This is what I'm trying to achieve, I'll post my HTML next! http://graphics.fangrock.co.uk/buzztouch/testpage.html Comments This is what I'm trying to achieve, I'll post my HTML next! http://graphics.fangrock.co.uk/buzztouch/testpage.html

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 04:16 PM (11 years ago) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test html page</title> <style type="text/css"> body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #4E5869; margin: 0; padding: 0; color: #000; } ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } a img { border: none; } a:link { color:#414958; text-decoration: underline; } a:visited { color: #4E5869; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 90%; background-color: #FFF; margin: 0 auto; } / .content { padding: 10px 0; } .content ul, .content ol { padding: 0 15px 15px 40px; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { / clear:both; height:0; font-size: 1px; line-height: 0px; } body,td,th { font-size: 18pt; } --> </style></head> <body> <div class="container"> <div class="content"> <h1>Instructions</h1> <p>This is the basic workflow used when working with the online control panel and the iOS or Android software developer kits (SDK) to make mobile apps. The steps are not always done in this order but this is the general idea. - <a href="http://www.buzztouch.com">www.buzztouch.com</a>.</p> <h2>HTML text layout </h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> </div> </body> </html> Comments <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test html page</title> <style type="text/css"> body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #4E5869; margin: 0; padding: 0; color: #000; } ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } a img { border: none; } a:link { color:#414958; text-decoration: underline; } a:visited { color: #4E5869; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 90%; background-color: #FFF; margin: 0 auto; } / .content { padding: 10px 0; } .content ul, .content ol { padding: 0 15px 15px 40px; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { / clear:both; height:0; font-size: 1px; line-height: 0px; } body,td,th { font-size: 18pt; } --> </style></head> <body> <div class="container"> <div class="content"> <h1>Instructions</h1> <p>This is the basic workflow used when working with the online control panel and the iOS or Android software developer kits (SDK) to make mobile apps. The steps are not always done in this order but this is the general idea. - <a href="http://www.buzztouch.com">www.buzztouch.com</a>.</p> <h2>HTML text layout </h2> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </div> </div> </body> </html>

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 04:26 PM (11 years ago) That is pretty messed up, the head is not right either. delete your source and copy this into it: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style> </head> <body> <div> <strong>Instructions</strong></div> <div>  </div> <div> This is the basic workflow used when working with the online control panel and the iOS or Android software developer kits (SDK) to make mobile apps. The steps are not always done in this order but this is the general idea. - <a href="http://www.buzztouch.com">www.buzztouch.com</a>.</div> <div>  </div> <div> <strong>HTML text layout</strong></div> <div>  </div> <div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> <div>  </div> <div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> </body> </html> Should look way better on your device then. Take it from there. Comments That is pretty messed up, the head is not right either. delete your source and copy this into it: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style> </head> <body> <div> <strong>Instructions</strong></div> <div>  </div> <div> This is the basic workflow used when working with the online control panel and the iOS or Android software developer kits (SDK) to make mobile apps. The steps are not always done in this order but this is the general idea. - <a href="http://www.buzztouch.com">www.buzztouch.com</a>.</div> <div>  </div> <div> <strong>HTML text layout</strong></div> <div>  </div> <div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> <div>  </div> <div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> </body> </html> Should look way better on your device then. Take it from there.

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 04:32 PM (11 years ago) Thanks Leon, I can't tell you how much i appreciate your help, but this is what i get with your code pasted into the source: http://graphics.fangrock.co.uk/buzztouch/text3.png When I save that screen, leave the page and go back, it looks completely different. Something isn't sticking. Does that make sense? Many thanks for your patience. Comments Thanks Leon, I can't tell you how much i appreciate your help, but this is what i get with your code pasted into the source: http://graphics.fangrock.co.uk/buzztouch/text3.png When I save that screen, leave the page and go back, it looks completely different. Something isn't sticking. Does that make sense? Many thanks for your patience.

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 04:38 PM (11 years ago) Ok well do me a favor and do the following: paste the underneath code in your source, save, update, run on simulator and take a screenshot. after that go back and make a screenshot how it looks after going back to your page. Would like to see what it does. Here the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style> </head> <body> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; "><strong>Instructions</strong></span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">This is the basic workflow used when working with the online control panel and the iOS or Android software developer kits (SDK) to make mobile apps. The steps are not always done in this order but this is the general idea. - <a href="http://www.buzztouch.com">www.buzztouch.com</a>.</span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; "><strong>HTML text layout</strong></span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></span></div> </body> </html> Comments Ok well do me a favor and do the following: paste the underneath code in your source, save, update, run on simulator and take a screenshot. after that go back and make a screenshot how it looks after going back to your page. Would like to see what it does. Here the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style> </head> <body> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; "><strong>Instructions</strong></span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">This is the basic workflow used when working with the online control panel and the iOS or Android software developer kits (SDK) to make mobile apps. The steps are not always done in this order but this is the general idea. - <a href="http://www.buzztouch.com">www.buzztouch.com</a>.</span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; "><strong>HTML text layout</strong></span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></span></div> <div>  </div> <div> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></span></div> </body> </html>

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 04:50 PM (11 years ago) OK, here are the screen shots: http://graphics.fangrock.co.uk/buzztouch/text4.png The top image is your code pasted in the source, screen saved and run on the simulator. The bottom image is if I leave the screen and come back, then refresh the simulator. Thanks, Darren Comments OK, here are the screen shots: http://graphics.fangrock.co.uk/buzztouch/text4.png The top image is your code pasted in the source, screen saved and run on the simulator. The bottom image is if I leave the screen and come back, then refresh the simulator. Thanks, Darren

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 04:58 PM (11 years ago) now it indeeds look like there are more thing going wrong. I do hope you have the options "Top Navigation Bar" and "Screen Nickname" above the editor fields? Your screenshot of the controlpanel looks kinda strange. Did you have any failures during your install? All files with the appropriate rights? Comments now it indeeds look like there are more thing going wrong. I do hope you have the options "Top Navigation Bar" and "Screen Nickname" above the editor fields? Your screenshot of the controlpanel looks kinda strange. Did you have any failures during your install? All files with the appropriate rights?

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 05:09 PM (11 years ago) No, I don't have top nav and screen name above the editor! My self hosted editor definitely looks different to the hosted one. Everything seemed to install fine. How do I reinstall? Oh dear. Must go to bed now, past midnight here. Thanks again for the help. Hopefully there will be a magic answer when I wake up tomorrow! Comments No, I don't have top nav and screen name above the editor! My self hosted editor definitely looks different to the hosted one. Everything seemed to install fine. How do I reinstall? Oh dear. Must go to bed now, past midnight here. Thanks again for the help. Hopefully there will be a magic answer when I wake up tomorrow!

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	11/27/12 05:15 PM (11 years ago) european time for me too ;-) Well, would certainly do a reinstall then, as nothing seems right at all. Comments european time for me too ;-) Well, would certainly do a reinstall then, as nothing seems right at all.

Fingers Crossed Veteran developer Posts: 234 Reg: Jan 16, 2012 Simcoe, ON 6,390	11/27/12 07:59 PM (11 years ago) I had a problem here things wouldn't "stick" either, font's wouldn't change etc. To fix it, I put this line in the source code of the HTML at the top. <meta content="width=device-width, initial-scale=1" name="viewport" /> Could be with a go! It fixed it for me as it was driving me nuts. Comments I had a problem here things wouldn't "stick" either, font's wouldn't change etc. To fix it, I put this line in the source code of the HTML at the top. <meta content="width=device-width, initial-scale=1" name="viewport" /> Could be with a go! It fixed it for me as it was driving me nuts.

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	11/27/12 11:50 PM (11 years ago) Thanks for the suggestion @fingers, alas it didn't work. I tried my original HTML in a hosted application and it worked exactly as expected. So, I have a dodgy installation. I've been messing about with this problem for days so at least i know what it is now. I'm going to try to reinstall today. Thanks, Darren Comments Thanks for the suggestion @fingers, alas it didn't work. I tried my original HTML in a hosted application and it worked exactly as expected. So, I have a dodgy installation. I've been messing about with this problem for days so at least i know what it is now. I'm going to try to reinstall today. Thanks, Darren

fangrock Aspiring developer Posts: 35 Reg: Jan 06, 2012 Lincoln 650	12/02/12 11:06 PM (11 years ago) Just a quick update, a complete reinstall of buzztouch solve the problem. in hindsight, i should have tried reinstalling the html plugin first! thanks everyone for all the help. Comments Just a quick update, a complete reinstall of buzztouch solve the problem. in hindsight, i should have tried reinstalling the html plugin first! thanks everyone for all the help.

LeonG Apple Fan Posts: 694 Reg: Nov 08, 2011 Hamburg 17,740	12/03/12 03:30 AM (11 years ago) Very nice, thx for update Comments Very nice, thx for update

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.

Discussion Forums > WebViews and HTML for Mobile

How do I control font and size on custom HTML page

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments