Will has been having lots of trouble with the word wrapper in his favorite text editor. He complains about it all the time. So to help him out we are going to be writing some custom word wrapping.
The Challenge
For this challenge we will be writing a custom word wrapper to display formatted text when entered into an input. First you will take in the text as one long string then adjust it with word wrapping before displaying it.
You can do this in any language you choose but if possible display it so that it can be used on a website. Use whatever html and css you choose to write. If you complete one level and move to the next you’ll be able to reuse your html and css.
Creating a Test Case
Unit testing for this challenge will be a bit different than the testing we’ve done in past challenges. You will also need different types of tests for each level. As part of the challenge find a way to test the code before you write it. Let the tests drive your development.
Level 1
Start by creating an input field to take in the text as a string. Then create a break at each sentence so that each one displays on a different line.
Input
Output
A Step Further
In college Will dated a girl that wrote long emails with run-on sentences and no capitalizations. It really annoyed him so let’s help out by capitalizing only the first letter in a sentence when we break them up or an ‘I’ in the middle of a sentence.
Input
Output
Level 2
Instead of breaking at each sentence we want our app to function more like a word wrapper in a text editor so we will break at the end of the screen with some padding.
You can do this by taking in the number of columns with your text input or by determining the size of the screen and how many characters will fit on it. Remember to leave some space at the ends for padding.
Make sure you break at the end of a word and not in the middle of a word as in Example A not in the middle of a word as in Example B. Though you may break in a hyphenated word on the hyphen as in Example C.
Example A
Example B
Example C
A Step Further
Going a step further make your word wrapper dynamic so that as the screen size changes so does your end point for wrapping.
Level 3
For some reason Will doesn’t want his html or xml elements to be wrapped but he wants the text within them to be wrapped. So for Level 3 wrap only the text that is not contained within <>.
Input
Output
A Step Further
Instead of taking in a string receive a file as your input (html, xml, or txt) and read the information on the file only adding the wrapper to the txt files and not the html or xml.