November 18, 2019, 02:40:14 PM
Welcome, Guest. Please login or register
News: Stay up to date with everything that's happening at http://plus.digitalsignage.com

MediaSignage support forum



Author Topic: Increasing font size in html5  (Read 2436 times)

erictaft

  • Newbie
  • *
  • Posts: 7
  • Karma: +0/-0
    • View Profile
Increasing font size in html5
« on: December 05, 2012, 06:45:31 AM »
Does anyone know if I can increase the font size in an HTML5 component. I am running screens in 1280x1024 and want to increase the font size of a webpage running in an html5 component. I don't want to reduce the resolution.

admin

  • Administrator
  • Hero Member
  • *****
  • Posts: 5005
  • Karma: +35/-8
    • View Profile
Re: Increasing font size in html5
« Reply #1 on: December 05, 2012, 12:54:10 PM »
It will display as the original page... no way to modify the HTML5 content.

HVL

  • Jr. Member
  • **
  • Posts: 86
  • Karma: +2/-0
    • View Profile
Re: Increasing font size in html5
« Reply #2 on: December 26, 2012, 11:21:31 PM »
Hi erictaft.
What kind of html5 content are you attempting to view? Can you link to the site?
It depends on the content you want to increase the font-size of. If you're hosting it yourself, a couple of lines of CSS can do the trick for you.

Below is my response to a similar request made a while ago. The science is the same. You can find the thread here.

Or does anyone know of any other method to display a zoomed version of a webpage, maybe a web service you could append the URL you'd like magnified to.. webpagezoomer.com/thepageiwanttozoom.com ?? Long shot I know lol.

I also use the HTML object to do just about everything in our campaigns as well. We've been having similar issues, more specifically problems with enlarging content pulled from an external site. Even though the content was pretty much plain text, I couldn't increase the font size using CSS.

I found a solution, though. By putting the whole external site in a <div>, I could then use transform property of CSS (see code below) on the divider, I was able to enlarge it by a factor of choice.

Code: [Select]
<html>
<head>
<style>
#wrap
{
width:670px;
height:412px;
border:0px solid blue;
margin-left:180px;
margin-top:85px;
transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5); /* IE 9 */
-moz-transform:scale(1.5,1.5); /* Firefox */
-webkit-transform:scale(1.5,1.5); /* Safari and Chrome */
-o-transform:scale(1.5,1.5); /* Opera */
overflow: hidden
}
</style>
</head>
<body>
<div id="wrap">
<iframe id="conventus" src="http://hvl-gruppen.dk/mediasignage/test/conventus_js.html" style=" border-width:0 " width="670" height="412" frameborder="1" scrolling="no"> </iframe>
</div>
</body>
</html> 


Examples
Orignal: http://hvl-gruppen.dk/mediasignage/test/test_original.html
Zoom: http://hvl-gruppen.dk/mediasignage/test/test_zoom.html

Note that the margins and the transform factor are the only things that differ in the two page-sources. (The margins need tweaking, because they are transformed as well. Didn't bother perfecting them for test purposes.)

I don't know if this will be of any use to you, but this solved my issues (for now).
An official zoom-feature for scenes/html components would also be appreciated.

If you post what site you're attempting to zoom in on, I could perhaps help you a bit more.

 

Carbonate design by Bloc
variant: carbon
SMF 2.0.12 | SMF © 2016, Simple Machines