TextBox font autosize?

Get help using Construct 2

Post » Sun Dec 30, 2012 4:17 am

Hello and Happy New Year to everybody.

I am trying to have an input box using TextBox. I can't use the "Auto Font Size" because I don't know how to use it/have not been able to. Therefore I tried using the CSS style property font-size, which apparently works fine.

However, I've had situations when using Chrome, or Opera instead of Firefox the text the user inputs looses it's proportions. This gets worse when I try using a smartphone (android) accesing the program published as a web site, not as a smartphone application.

My question, is there is a way in which I can set a font size for the TextBox so that it maintains its proportions/autoscales for different screen sizes?

Thanks in advance.

Here is my capx, in case I didn't explained myself:
http://dl.dropbox.com/u/39300777/FAQs/TextBox%20AutoSize.capx
B
12
S
2
G
5
Posts: 17
Reputation: 3,564

Post » Fri Jan 04, 2013 1:16 pm

Doing some more research I found this post
http://www.scirra.com/forum/automatic-text-box-resizing-overrides-css-size_topic53912.html

Which is basically the problem I'm having. Now I see that by using CSS it maintains the font size, although the layout is scaled using an android smartphone (although I'm not making a native app, I'm putting the file on a webserver and accessing it as a normal HTML site). If I choose autosize, this overrides the CSS. I also tried the spritefont plugin but got the same results.

What has ocurred to me: Is there a way to obtain the layout scale size so I can multiply the font em size using CSS to keep the scale?

Of course, if someone has a better idea please let me know. :)
B
12
S
2
G
5
Posts: 17
Reputation: 3,564

Post » Sat Mar 30, 2013 11:44 pm

Hello InfinityX!
(sorry for my bad english)
I'm also having the same problem in my TextBox. I also do not know how to use the "Auto Font Size". Ok, it automatically changes the font size according to the layout, but how to set the size of my font? I want my font-size at 30px but when I use "Auto Font Size" it becomes very small, like 10px. My solution was to Resize it every Tick or whatever. Like this:

-Every Tick
             -Set TextBox size to (300*LayoutScale, 40*LayoutScale) (My TextBox initaially have 300px,40px)
             -Set TextBox CSS Style "Font-size" to ""&30*LayoutScale &"px"

The "set size" worked fine, but the "CSS Style" don't. Nothing happens (with Auto Font Size off). All looks right to me, but I don't know why it doesn't work. Does CSS Style doesn't accept this ""&30*LayoutScale &"px" expression?

I searched for my problem, and I found this post.

If anyone has any solution, I will be very grateful! Oni Lo2013-03-30 23:49:13
B
13
S
4
G
1
Posts: 17
Reputation: 2,337

Post » Wed Apr 10, 2013 3:38 pm

Hey Oni Lo!
Sorry for the late reply.
Don't worry about your English, mine is worse! :)

Regarding this issue, I still haven't found a solution for it; in fact I had given up for a while. What you describe also happened to me. I tried the Auto Size, and CSS, but still could not get it to work.

I will try to contact Ashley, to see if he has any suggestions.
Regards.
B
12
S
2
G
5
Posts: 17
Reputation: 3,564

Post » Mon Oct 05, 2015 9:13 am

Hello,
I had the same problem as you guys and I have managed to find the solution. You have to go to the folder where Construct was installed in your PC. Then, go to > Exporters>html5>plugins>textboox. And you should open the file "runtime.js".
In the script, you should find a place where is says the following:

if(this.autoFontSize)
jQuery(this.elm).css("font-size", ((this.layergetScale(true) / .....

You should edit this text and place the following:
if(this.autoFontSize)
jQuery(this.elm).css("font-size", (((2*this.layergetScale(true)) / .....

The method consists on editing the plugin so that it can increase the size of the text and then it will continue to resize depending on the layout scale.


IMPORTANT: You should close your project and when you open it again, and you press RUN, it will work.
B
3
Posts: 4
Reputation: 183

Post » Mon Oct 05, 2015 9:46 am

As Ashley has often said, it is not a good idea to modify the built-in plugins and behaviors. It is much better to just make your own, if needed.
If your vision so exceeds your ability, then look to something closer.
Moderator
B
120
S
28
G
68
Posts: 4,844
Reputation: 48,289

Post » Tue Oct 06, 2015 12:32 am

Hi guys, my solution is the following. You can disable the "Auto font size" option, then you create an "Every tick" event (or you can set this on layout start), now you set the CSS style of the textbox with this values: property name = "font-size", value = (WindowWidth/YourLayoutWidthInPixel)*FontSizeYouWantInPixel&"px". I hope this solution help you :)
B
6
S
1
Posts: 1
Reputation: 302

Post » Thu Nov 05, 2015 1:21 pm

@weslleymaciel

great tip !!!
B
26
S
11
G
2
Posts: 669
Reputation: 5,038

Post » Fri Sep 23, 2016 3:59 pm

I was revisiting the topic and after a long research I came up with a great way to adjust the font size according to the screen size and make sure it looks great in all the resolutions.

You should disable "auto font size" and then set the CSS style to property name="font-size" and value=2.5&"vh".

"vh" sets the size acording to the height of the viewport. You can change the 2.5 unit of the example for the number that better works for you.

I have try it in 7 different devices and looks great in all of them!
B
3
Posts: 4
Reputation: 183


Return to How do I....?

Who is online

Users browsing this forum: theosciandra and 26 guests