Text Component

Text is one of the most important comp (component) of bilza library.It is very important to understand how to use Text since it is used in all educational products (the main target of this library).

The Text comp is not only different from other components of this library but the "Text" comp in bilza.js is also implemented differently from other libraries.

To understand Text comp we need to understand that we can set text dimentions (width and height) using following of the three props.

1. "fontSize" Prop:

The fontSize prop of the Text comp is the main factor which decided the width and height of Text comp. If you do not need to worry about the width and height of the text content (according to the screen size i.e Non Responsive text) just use fontSize. The resultant width and height of the comp will be what ever it is at that fontSize.

By default the Text Comp uses fontSize Prop to determine its width and height

fontSize Animate Example

2. "fitToWidth" prop:

Text comp has a boolean (AniBoolean) prop "fitToWidth". This prop by default is set to false. Incase if we want that our text be sized according to the "width" prop and not fontSize we can disable fontSize props by setting "fitToWidth" prop as true.

Once "fitToWidth" (or fitToHeight) prop is set to True, the "fontSize" prop is disabled. It means that all the animations etc attached to comp "fontSize" prop will not run and Text comp dimentions will be decided by width prop.

When "fitToWidth" is set to false (default setting) the width of Text comp is treated as "Maximum Width". It means that we can set any value for fontSize prop and it is fine but if the resultant width is larger than comp.width then it is reduced to the given width.

By default the width (and also height) value of a Text comp are set at 300% thus they have no effect most of the times. To see some effect these values need to be reduced by the user.

Text FitToWidth True Example

Text FitToWidth False Example

3. "fitToHeight" prop:

Text comp has a boolean (AniBoolean) prop "fitToHeight". This prop by default is set to false. Incase if we want that our text be sized according to the "height" prop and not fontSize we can disable fontSize props by setting "fitToHeight" prop as true.

Once "fitToHeight" (or fitToWidth) prop is set to True, the "fontSize" prop is disabled. It means that all the animations etc attached to comp "fontSize" prop will not run and Text comp dimentions will be decided by height prop.

When "fitToHeight" is set to false (the default) the height of Text comp is treated as "Maximum Height". It means that we can set any value for fontSize prop and it is fine but if the resultant height is larger than height prop then it is reduced to the given height.

By default the height (and also width) value of a Text comp are set at 300% thus they have no effect most of the times. To see some effect these values need to be reduced by the user.

Summary

• By default Text comp uses fontSize prop for setting its width and height. The "fitToWidth" and "fitToHeight" props are both set to false by default.
• If any of the "fitToWidth" OR "fitToHeight" Props are set to "True", this will disable fontSize prop.
• When "fitToWidth" OR "fitToHeight" Props are set to "False", they act as maximum width and maximum height.
• If "fitToWidth" AND "fitToHeight" Props are both set to "True" it is not a problem unless we assign conflicting values / animations to these props. for example if height prop is increasing the size of the Text on every draw and width prop is reducing the size of the Text on every draw this will cause flickering.
• If "fitToWidth" AND "fitToHeight" Props are both set to "True" the height prop is run first and than the width prop. It means that if both of these cancel each other: it is the height prop that runs last and thus its (height prop) result are visible on the screen.
• An interesting thing to know is that the font size of text (in browser not specific to Bilza.js) determines its height and the width is decided by the Character used.

I hope the above discussion is clear incase of any problems please contant me and I may create youtube video on this topic.

Lets look at some frequently asked questions about Text Comp

1. How to create Non-Responsive text that does not shrink or grow with the screen size?

If we keep the "fitToWidth" AND "fitToHeight" both as false the text comp will be non-responsive. It will be displayed based on fontSize and not width or height props. However keep in mind that when "fitToWidth" or "fitToHeight" are false they act as maximum width and maximum height. For that if you want these two variables not to have any role just give them a large value. By default "fitToWidth" AND "fitToHeight" are both set to 300%.

2. How to create Responsive Text that grow and shrink with the screen?

To make Text really Responsive where it adjest its self to the width as well as height of the canvas we need to set either "fitToWidth" or "fitToHeight" as true. This will ensure that the text is fitted into the Box determined by the width/height (which ever is set true) and will use the other prop as maximum width/height.

3. What problems can we have with "fitToWidth" = true?

For example if we give Text comp width = 100% and the content is a long sentence, bilza will have to shrink it and it will look decent on the screen since to fit it into the width we will also need to adjest its height. On the other hand if the content are very short e.g ("Hi") now if we fit this to the 100% of the screen width and there is no-restriction on the height it will conver the entire screen. If this is what you want then its ok.

Using fitToWidth without fitToHeight Using fitToHeight without fitToWidth
4. If we set "fitToHeight" to true and keep "fitToWidth" as false; is that a problem, if yes why?

Keeping "fitToHeight" as true and keeping "fitToWidth" as false is not a problem or error as long as you want the desired results. If "fitToHeight" is true it means we do not have to worry about characters covering up the entire height of the screen BUT if the content is too long it will run off the screen.

5. How can we set 2 different Text comps on the screen have same fontSize?

To make 2 different Text comps have same fontSize all we have to do is set "fitToHeight" of both of them to true and then give their height props the same value. For example if 2 Text comps both have "fitToHeight" = true and height = 10% both of them will have same fontSize.

6. Can you please give an example of conflict between fitToHeight and fitToWidth?
work in progress Conflict between fitToHeight and fitToWidth
7. What if I want Text content to be smaller than or equal to some width Or if I want Text to be smaller than or equal to some height ?

When fitToWidth is set to false the value of width Prop is treated as "maximum Width" similarly when fitToHeight is set to false the value of height Prop is treated as "maximum Height". However you may not notice this since by default the width and height props are set at 300% so their effect is not visible. You can just set the width prop and the height prop to the desired numbers while fitToHeight and fitToWidth are false and they will allow Text to grow upto that point but not more.

8. Give examples where each of the fontSize, fitToWidth and fitToHeight is more suitable to use.
• If we want Non-Responsive text just use fontSize
• If we want to restrict font to some specific fontSize (or want it to occupy some specific height on screen) use fitToHeight. All the text comps on a screen with same height prop value will have same fontSize provided their fitToHeight = true.
• If we want to fit content into some area use fitToWidth. If the content is more the fontSize will be reduced to fit it, however if the content are less then the fontsize will have to increase to fit the width value.