Auto resizing text on tablets issue


(Lucky) #1

Hey guys,
We’ve had this problem for a while for ads and we’ve avoided using text with the built in fonts with hype because of it.

When you set up text in hype it resizes text on different tablet models
Desktop:

IOS:
Android:

And on different androids it tabs slightly differently. Is there a way to make it consistent on all devices WITHOUT using liquid layouts/keeping the file dimensions as static numbers. Thought it’d ask
Thanks


(Mark Hunte) #2

Could you give the text areas all a class name. Then use some JS to determine the device and set the font size for the class.

Basically get all the elements with the text class and add/join another class to it that has corresponding css .

i.e initial class would be TextClass

using JS to set the TextClass to TextClass Andriod or TextClass iOS

your css style would then have sets of instructions for the fonts for .Android or .iOS


(Lucky) #3

Problem with that is there may be 10 types of androids and 3-4 models of ios tablets people could be browsing and i have to be account for all of those as well as the fact that if it doesnt encounter any of those it could default to a font thats way too huge for a weird android model. I’m not sure if its worth the hassle over exporting it as a png, but thanks for that feedback thats a good way to do it if i didnt have tight deadlines


(Mark Hunte) #4

This detects correctly my Screen size on OSX and iOS.

Cannot test anything else what does it do on your Androids.

Thinking if you can get the screen size then you may be able to work from there.

 var  height = screen.height;
 var width = screen.width; 
hypeDocument.getElementById('text').innerHTML =  "w" + width + " x " +  "h" + height 

ScreenSize.hype.zip (12.6 KB)

Also if you need to think about orientation on the Androids, look here which I think deals with androids that flip the sizes depending on orientation.


(Lucky) #5

Thanks for that, that’s a neat command. I was talking to a co-worker about this, he’s made a script based off something like what you’re doing for hype, but the issue he’s running across is random text going to the next line, overflowing outside the textbox and other unexpected behaviour while yes it scales down. Kind of like the screenshots where the text leaves the box.


(Mark Hunte) #6

Yer I have seen that. Always solved it by shrinking the font. Maybe he is seeing something similar but different.

I just did a quick test and the code with the classes works really well on my Mac stuff.

This is a simple code example…

Styles in the head.

	<style >
	
	
	
	.OSX {
    font-size: xx-large !important;
}

	.iPad {
    font-size: medium !important;
}


	.iPhone{
    font-size: xx-small !important;
}
	
</style >

The onload code.

 var  height = screen.height;
 
var width = screen.width; 
 
 
 hypeDocument.getElementById('text').innerHTML =  "w" + width + " x " +  "h" + height 
 
 
 if ( parseInt(width) == 320 ) {
 hypeDocument.getElementById('text').className += " " + "iPhone";
 
 }
 
 if ( parseInt(width) === 768 ) {
 hypeDocument.getElementById('text').className += " " + "iPad";
 
 }
 if ( parseInt(width) > 1024 ) {
 hypeDocument.getElementById('text').className += " " + "OSX";
 
 }

You probably could do it with a switch statement


(Freelancer) #7

@Luckyde This happens if you put more fonts into a single paragraph?. I had this problem several times and not only in Hype. In android the text is always a bit different.

@MarkHunte nice solution, thanks!


(Jeroen) #8

Hello,

I’ve include the above script in my Hype project and on every platform the font size is changing but on an Android smartphone nothing happens. Does anyone of you guys know why it is and maybe have a solution?


(Jeroen) #9

FYI. The font that I used was a font from hype. When I changed it to a custom font with @font-face no problem anymore on Android mobile


(Jonathan Deutsch) #10

Do you consider this a bug then? If so, do you mind sending a zip of your .hype document (perhaps the broken and fixed version) to support@tumult.com and we can see if there are changes we can make to improve it? Thanks!


#11

I’m confused about this part. What’s wrong with layouts? Isn’t that what it’s for?


(Jeroen) #12

I will send you later this week a sample so you can see for yourself.


(Jonathan Deutsch) #13

Thanks - appreciate it.