Support for page sizes: A4, Notebook, Journal, Foolscap

[salian]

Issue #10 had mentioned a possible feature for supporting different page sizes. Although the issue was closed, it doesn't seem to have been implemented.

Lot of times there are specific page sizes needed.

So in the UI there could be an option to select the page size, maybe a dropdown with different presets like A4, Notebook, Journal, Foolscap; and an advanced option of manually stating the page size in cms.

[saurabhdaware]

Oh yes that would be great! A little busy these days so keeping it open if someone wants to contribute

[radhikasethi2011]

Could we also have an option in the UI to upload a scanned image of a paper? Sometimes college assignments need to be written on the papers with an extra header, including college name and all. So regarding that

[saurabhdaware]

Hi @radhikasethi2011, we can currently do that with, Draw Diagram -> Add bg image. But yes makes sense to have a more straightforward way

Edit: Oh so I just realized you meant having something that you can write over? I reopened #32 , we can track this issue there. Someone did bring this up earlier but I just forgot, I thought having an extra image solved the issue.

[saurabhdaware]

Working on this! Will be up along with the new design.

[saurabhdaware]

Added A4 size in #54 , will be adding other sizes later.

[iampratham29]

I want to contribute to adding the remaining sizes. I've not done any contribution before. Can you guide me? I forked this repo and cloned it according to the contribution guide. I've installed npm also, but I don't know how to run it on the node.

[saurabhdaware]

Hi there @iampratham29 , So to run a server, you will have to npm install inside the project directory and then npm run dev which will start a development server. Then you can open http://localhost:5000 in your browser to see the tool work offline

[iampratham29]

Done 🤝 Now please tell me how to make it available for different page sizes, or some related learning material shall be helpful

[saurabhdaware]

So this line makes it paper of size A4 https://github.com/saurabhdaware/text-to-handwriting/blob/master/css/index.css#L167

You will find ratios for other page sizes on Google. Depending on that you can have classes that change the height with respect to that ratio.

.page-a.a3 {
  height: calc(formula);
}

so that when a3 class is added to page-a container, it will change the size to A3.

Then we can add a new option for A3 in <select> and when user clicks that, we can add class a3 to .page-a with javascript

[saurabhdaware]

oh and if you think this can be done easily by some other way, you can try that out as well.

[iampratham29]

I've added 4 options and used getElementById function for setting height accordingly, but css property isn't changing. I even tried by jqery. But same problem arised. Is there any thing in the code which is desisting css prop from getting altered ?

[saurabhdaware]

Is it changing the size of the div under 'input' heading?

Not exactly sure what might be causing this. You can create a Pull Request with your current JavaScript getElementById approach and maybe I can look and help with the code.

Adding jQuery won't be possible since it will add additional dependency which is not required anywhere else in the code

[iampratham29]

Ok... I've sent the pull request