Added the option to print text from the web interface.

[sync1211]

This PR adds a button to insert text to the canvas view.

Font family and size can be adjusted in the settings panel.

[NaitLee]

Thank you very much 🎉

I'll give it a test & refinement when I have time!

In earlier days for Web text printing I'm thinking about features like rich text, alignment, more UI stuffs, etc. But maybe it's been proven being too much 🙃

In the code there are few inconsistence, anyway. But I think I can (also) correct them by myself 😄

Examples:

• prefer snake_case in inner context
• use Notice.* rather than window.alert etc.
• Save element to 'this', if using multiple times & using frequently
• React to input element change event with putEvent callback
• In previous case, Modify input element visual state by dispatchEvent

I think these can be in contribution guideline later. (phone virtual keyboard have no darned backtick)

It's prefered to just put new i18n strings below existing content, for ease to other languages. ... And a shameless beg, may check & add missing German i18n strings? Maybe it's outdated...

[NaitLee]

I'm also curious about if bisect should be used in text wrapping 'detection', for performance.
Edit: well, if I've not mistaken, current method have O(1) so ignore this.

And 'wrapping by space' needs to be optional. It can have problem in CJK, which has continuous content.
Edit: For the corresponding function I think you can try string.lastIndexOf

And RTL layout, though somewhat difficult for us... This could be explained by RTL users in the future.

[sync1211]

Thanks for your feedback! I have updated my PR with most of the suggested changes.

The wrap_by_space function has a fallback case if it does not find a whitespace, so it should not cause any lockups, if that's what you mean.

As for the RTL text; would it suffice to enable RTL via unicode (U+202E) and align the text to the right side of the canvas? (The alignment could probably be implemented by using canvas_width - canvas.measureText(text).width as the x-position for canvas.fillText.)

As for the German strings; I've already started looking through them and I'm going to create a separate pull request once I'm done.

[NaitLee]

Oh, let me clarify that:

First, in my another on-going project I've found that finding string index with while loop & in(de)crement is very slow, compared to indexOf. Maybe indexOf is internal optimized procedure?

It just returns index if found otherwise -1. Also there's lastIndexOf.

And, in CJK a space could sometimes there, around numbers or English terms etc. That may make the wraps really weird -- consider a CJK sentence is a very long word, and it/they use full-width symbols, without spaces either.

I think you can pick some sentences from Chinese readme to test the result. Don't forget to mix a few English words & spaces at random place 😝

There's RTL in cmdline pf2 text printing, but it's rather basic, and have obvious problems. I don't know if browser itself can address text layout well, though.

You can also get similar environment, for example a Debian live VM with Arabic locale set, and some string from translator service...

Thank you again, and hope I have chance to test sooner...

[sync1211]

Thanks for the reply. I've corrected my use of lastIndexOf to account for the different behavior.

I have found that canvas.fillText displays RTL text correctly (using the RTL-override unicode character) and once added to the canvas the text will be treated as image.

I'm going to be testing the word wrap with different locales once I get the chance to set up a VM for testing.

[NaitLee]

Hi, I've tested it and in fact it's great!

I think I could merge it, if you think you have it done 🙂

Minor things: The text config should be in Print panel, hidden by default, I think. And wrap-by-space should be optional.

By the way consider the edge case below. If you want to investigate it, feel free; or simply throw these to me 🤣

---

When mixing CJK and Latin it can have problems. You can observe with following example (consider it as lorem ipsum):

搜索 apple，出现的不是水果，而是著名的苹果公司。它拥有辉煌的发展历程，且诸如 iPhone 等电子产品颇受广大消费者的青睐。
Search for apple, in result it's not fruit, but the famous Apple company. It have bright development history, and digital products like iPhone are very popular among customers.

Config: sans-serif (Noto Sans CJK SC, by browser config), 22px Try entering all these, and try with Chinese line alone, then try reversing the lines' order.

Maybe it's the line-width-by-division out of control with full & half width glyph all together? And you may understand why wrapping by space should be optional...

I feel hard dealing with these in backend code too. My opinion is to use the old-good bisect to see if it's overflow.

[sync1211]

I see what you mean. Unfortunately I don't really know much about how to format CJK text.

I've added a toggle for the automatic line break to the text settings. Since I found the text input field to be way too small for larger text, I have replaced it with a text area.

This allows the user to insert their own linebreaks into the text. I'm also thinking about adding a "preview" function, so that the text settings are applied directly to the textarea on change.

[NaitLee]

Brilliant!

The layout is not friendly for mobile. I think that's easy to fix. But In my mind it can be in a panel, other than popup.

In current way, you may temporarily add a class (with some CSS style) to the preview canvas, let it over/under-lay to the textarea. The "panel" thingy is what "Print" "Help" "Setting" are, but it can also be without a compact-button. You may seek around for how it works, and see the usually-hidden error-panel.

Sorry for saying probably too much, CJK is just break the text anywhere, because it (usually) have meanings per-character. And thank you for letting me know the vh unit...

Tips:

• Use CSS @media to adjust layout whereas device width varies.
• Try display: flex; on those left-right layout
• Make textarea width 384px (particularly, var(--paper-width)); let font-size & white-space follow the options.
• Try wrapping <input type="checkbox" /> etc in a <label>. People may prefer clicking on text label, not the small box.
• px could also be translated, consider i18n

You may leave these to me:

• Maybe font family customizing? (manual input, or even choose a font file.) And may add Unifont to option list.
• Print text by drag-drop a file, as what's image printing already doing
• (really optional) bold/italic/underline, appending/removing, mixing with image

[sync1211]

Thanks for the tips, I've implemented a basic preview of the text inside the text area using styles. I'll be working on making the UI more mobile friendly next.

[sync1211]

Thanks for the suggestion to use a flex for the layout. I've now moved the text settings above the text editor and added an option for text alignment.

I've also added drag & drop support for text files and replaced the generic fonts with known web-safe fonts.

[NaitLee]

Hi, and sorry for leaving it here for a long time.

I think it's time for me to do a bit more, so think about if there are something undone in your mind, and I consider doing them.

I'm also considering to adjust your code, for example change how font work (font list, etc) and layout. Tell me if you want it happen :)

I will let you know when I can start, maybe hours or days, and it's desired to merge this then.

[sync1211]

I'm done with all of the features I wanted to add.

If you have anything you want me to change, let me know.

If you have any ideas on how to improve the layout and controls, feel free to implement them.

[NaitLee]

Okay, so I've merged. Many thanks 🎉