JSFiddle: https: // http://jsfiddle.net/thou6ju9/1//
Situation:
Letter tiles are dynamically generated and added to the green zone. Using CSS, they are located in a div using flex. When the screen is changed, the letters will be rearranged according to the new resolution.
Goal:
If the screen is quite large, the letters should take up more space, scaling, but preserving their aspect ratio.
UPDATE:
If the letters can be placed in 1 row, they should be centered and scaled until the greenest zone is adopted (without overlapping each other, observing the fields) If 2 lines are required, the letters should be equally distributed and scaled (in according to the available space between the two lines)
Problem:
I assume this is not possible with CSS. Mix with JS would be like that. Question: which one?
I have included an additional function (adjustLetters) where some JS adjustments can be made if necessary.
for (var index = 0; index < AMOUNT_OF_LETTERS; index++) { sContainer.append(addLetter(arrLength[index])); } adjustLetters();
Limitations:
- From 1 to 10 letters will be shown - Letters cannot go beyond the green zone - It should work when all letters have 1, 2 or 3 characters or a combination of both - It will always be displayed in landscape orientation (in fact, this is not a limitation )
var arrLength = [1, 3, 2, 1, 2, 3, 1, 2, 3, 3, 2, 2, 1, 2, 3];
The length of letters is determined in this array.
A complete solution would be amazing, but, of course, the direction in the right direction is important :-)