Text Modification in PHP / Javascript

Question

i am here with quiet a complex question. A Idea is to modify and print read text from file, like a PostIt-Generator.

• Read text from .txt-File (done)
• pass text as string to php via ajax with some format options(color,font,size)

• On "Generate" press, modify text and print it in according size (Post It size 76mm x 76mm)

              var f = file;
              if (f) {
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      var contents = reader.result;
                      console.log(contents);
                      $('#filePreview').html(contents);
                      $('#filePrintPreview').html(contents);
                  };
                  reader.readAsText(f);
              } else {
                  alert("Failed to load file");
              }
  

as far i am able to successfully load a txt file via dropzone. Get its content and place it inside a preview div as plain text with changeable color and font.

Now i need to push it in a "container" that has the chosen size, for example post it size (76mmx76mm). If the text from the file is too long for the chosen font size to fit in the "container" some sort of warning should appear. Therefore i guess i have to calculate the font height with pixels and convert pixel size to milimeteres. If it is easier achievable in javascript, i am open for everything. Any Suggestions?

For better visualisation, this is the input form:

Answer 1

You should use css property overflow (I suppose you need overflow:hidden) for your "container". And check if text fits into your "container":

if (element.offsetHeight < element.scrollHeight ||
   element.offsetWidth < element.scrollWidth) {
   // your element have overflow
} else {
   // your element doesn't have overflow
} 

Please see this answer for more details: Check with jquery if div has overflowing elements