Текст выровнен по фигуре

Я создаю страницу с текстовым полем, в котором я могу писать текст, и автоматически, используя js, этот текст (с некоторыми изменениями) записывается во многих других элементах страницы, которые имеют форму параллелограммов (которые отличаются только размерами) . Проблема не в создании таких параллелограммов, а в том, чтобы расположить текст так, как он выглядит, как написано в параллелограмме. Я также хотел бы, чтобы текст в этих фигурах автоматически выравнивался по ширине, вместо того, чтобы вручную выравнивать все фигуры путем добавления пробелов. Я пробовал использовать теги svg и tspan, но проблема в том, что таким образом я должен вручную начинать новые строки, и для каждой разные линии формы имеют разную длину. shape-outside может быть хорошим решением, но он не поддерживается многими браузерами.

Еще какие-нибудь идеи? Спасибо!