-2

NOTE: THIS IS NOT THE SAME AS FONT CHANGE IN RESPONSE TO VIEWPORT CHANGE. I.E. {font-size: 3.2vw;} Pure CSS to make font-size responsive based on dynamic amount of characters IS NOT THE SOLUTION.

EXAMPLE

When text is translated from one language to another on a browser, the length of the source and translated text is likely to be different. For example:

 Language   | Translation    | Ratio
______________________________________
Korean      | 조회            | 0.8
English     | views          | 1
Chinese     | 次檢視          | 1.2
Portuguese  | visualizações  | 2.6
French      | consultations  | 2.6
German      | -mal angesehen | 2.8
Italian     | visualizzazioni| 3

I'm looking for a way, either with CSS and/or JavaScript, with which I can get the text to auto resize font and remain within the height and width set by the div that contains the text.

Overstack
  • 39
  • 1
  • 1
  • 5
  • https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters you might find your answer here – Wajeeh Hasan Jul 12 '22 at 03:21
  • Please try to write some code to do this and if you are still stuck put the code into your question with a description of what isn't working. Here's one way of getting started: find the width of the original text, get the translated text and find its width. If narrower, increase the font size and loop round seeing if it's (roughly, you'll often not get it exactly the same) the same. If so stop. And similarly if its width is bigger to start with. – A Haworth Jul 12 '22 at 21:35

2 Answers2

-1

When the language number is limited, you can use image instead of those texts

hapk
  • 26
  • 2
-1

you can add this attribute to your div :

object-fit: contain;

Guidate Studios
  • 1