Javascript - Nautral writing
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

The goal of the project is to be able to type/paste a text in a text area, and make it look like natural handwriting. Perfection is not required on this step, but the winning project will be hired for further work on the same application and possibly other projects related to finance.

Must have requirements:

  • Deliver HTML file with javascript code. If any other language is used, please be sure it can run in mac environment.
  • Text area should accept text by typing or paste
  • "Render" button shall parse the text and make the following to each letter on the text: a. Assign randomly font 1, font 2, font 3 , font 4 (Use any font, in a step further, they will be the same font with slight variations) b. Change alignment of each font randomly 1,2 or 3 points up or down c. randomly add one or to spaces at the beginning of each line. d. Randomly set the distance between lines 1,2 or 3 points up or down for each new line.

Good to have requirements (Bonus):

  • Select document size (Letter, card, A4 for examlpe)
  • Render to vectors file (Can be svg, or illustrator .ai)
  • Save the results for reuse
  • Select font family
  • Choose with textboxes/combos as parameters the limit of points that the lines/fonts will be offset.

Developer's criteria and sugestions for making the text look more natural are welcome.

Suggested Addons:

Rich text editor for javascript: https://www.froala.com/wysiwyg-editor

Text to vectors: https://cairographics.org/

Hi Vortilon, from the info you have specified i have understood the following, so if any one type or copy paste text and click render button the entered text should appear in different fonts ?
Subhash Dasyam 1 month ago
awarded to kerncy

Crowdsource coding tasks.

2 Solutions

Winning solution

Hello

Here is my solution using jquery and javascript.

http://jsfiddle.net/m4bugpn1/1/

I have not done the point d as with this method line changes size automatically thanks to rule b. Do not hesitate if you have any question.

Hey Kerncy, Excellent and elegant solution. It almost covers all requirements. You are a strong candidate for winning the award ! Thanks for your good quality work
Vortilon 1 month ago
Thank you, here is a small fix for point C that add spaces at beginning of new lines : http://jsfiddle.net/m4bugpn1/2/
kerncy 1 month ago

Take a look at my proposed solution.

Includes Froala Editor, selection of character and line offset limits and some basic styling.

I used 4 similar Google Fonts for this example.

http://codepen.io/layzee/pen/qRNzMM

Updated January 20th: Additionally, I included the option to vary letter-spacing and word-spacing.

LayZee . Excellent work as well. I gave the award to kerncy because It was also a great job and I thought no other projects will be posted. I will send you a tip at the end of the project. Let's keep in touch as well.
Vortilon 1 month ago
Thank you for the tip. You could also add slight variations in letter-spacing and word-spacing to add a natural writing feel to it. Actually, I just added these to the Pen.
LayZee 1 month ago
View Timeline