Creating a real-time preview from HTML

Question

JavaScript

Actually, for a primitive editor, it is necessary to implement previews (the most banal example is slide previews in PowerPoint). But I ran into such a problem as displaying the text. Initially, I planned to implement previews in HTML - the implementation was simple, but I ran into a problem. Text resize. There are quite big problems with proportions and in some browsers (for example, in opera) the minimum font size (9px) is specified. Yes, and it looks wretched ...

All the implementations that I have seen of this implement this through canvas - but it's not possible to convert div to canvas. More precisely, projects for the implementation of this are in a rather deplorable state.

Generating a picture every time is an option, relatively simple and fairly high-quality previews come out. But this causes a heavy load on the server, given that the generation of previews will occur every second (many users) ...

Can anyone suggest me a more normal option (something between a complex implementation - everything on the client and a simple implementation - everything on the server)

Answer 1

It is possible to translate the entire text through js into a space in the preview, and place all the text (the resulting spaces) in the blocks in the inline elements, the background of these elements is recoloring the font color in the blocks. When displaying these thumbnails, the lines will look natural at almost any scale.