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:

Community · Accepted Answer · 2017-05-23 12:16:29Z

2

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

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 4, 2017 at 11:38

Iurii Drozdov

1,7851 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AHahn Over a year ago

This helped me a lot with my text resizing. Thanks.

Collectives™ on Stack Overflow

Text Modification in PHP / Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related