challenge

Word Wrapper

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

1
This is a test of the word wrapping system. Had this been a real word wrap someone else would have written it.

Output

1
2
3
This is a test of the word wrapping system.
Had this been a real word wrap someone else would have written it.

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

1
i really enjoyed the movie last night. it was great. do you want to get lunch before class tomorrow? dana said you and i could meet them at noon.

Output

1
2
3
4
5
6
7
I really enjoyed the movie last night.
It was great.
Do you want to get lunch before class tomorrow?
Dana said you and I could meet them at noon.

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

1
2
This is a very long sentence that just keeps
going and going and going.

Example B

1
2
This sentence is also a long one but it doesn't bre
ak at the right place so looks funny.

Example C

1
2
3
This sentence is a rather long sentence that is a run-
on sentence with the word sentence in it way too much
when will it ever end?

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

1
<html-element class="theClass anotherClass makingItLonger" name="longElement">This is a really long html element, well not really as I just say that because I want you to think of it as long.</html-element>

Output

1
2
3
4
<html-element class="theClass anotherClass makingItLonger" name="longElement">
This is a really long html element, well not really as
I just say that because I want you to think of it as long.
</html-element>

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.