Post on 26-Dec-2015
Word Processing
Word Processing and the WWW• Differences
– WWW is dynamic• Variable window size
• Possibly non-graphical devices
• Leave decisions to the browser
• Simple implementation when building many browsers
– Word processing is static• Fixed page size
• Exact layout
• Target is always paper
Word Processing and the WWW
• Similarities– Text is still text– Basic styling of headers, bold, italic, tables
• These are inherent in how people communicate with text
– Similar underlying algorithms and structures
Microsoft Word
Style Font Size Bold, ItalicUnderline
Microsoft Word
Justification Lists Indentation Colors
Virtually every word processor has these same features
Word and HTML
Word and HTML
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Originator content="Microsoft Word 9">
<title>This is some new text</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Dan R. Olsen Jr.</o:Author>
</o:DocumentProperties>
</xml></head>
<body lang=EN-US style='tab-interval:.5in'>
<div class=Section1>
<p class=MsoNormal>This is <b>some</b> new text</p></div>
</body>
</html>
Word and HTML
HTML in Word
• Word doesn’t like JavaScript very much
• HTML– This is <b>some</b> text
• Word– Use special characters beyond 128 instead of tags
Encodings
T h i s i s < b > s o m e < / b > t e x t84 104 105 115 32 105 115 32 60 98 62 115 111 109 101 60 47 98 62 32 116 101 120 116
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
T h i s i s ## s o m e ## t e x t84 104 105 115 32 105 115 32 220 115 111 109 101 221 32 116 101 120 116
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Bold
Bold
Translating Encodings
• Word encodes many more kinds of style information than HTML– Paragraph indentation
– Superscript and subscript
– Embedded EXCEL tables
• Saving as HTML– Re code similar features (bold, underline)
– Simulate the Word feature using HTML features
– Throw away the Word feature
Translating Encodings
• MS Word -> WordPerfect
• WordPerfect -> HTML
• HTML-> MS Word
• Each step may modify or discard some features
• The end result will rarely be the same
Algorithms for Basic Word Processing
Type a character
• Delete a character
• Select some characters
• Bold some characters
• Cut / Copy / Paste
Cursor Positionan index into the string
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Cursor = 3
Cursor=6
Typing a Character
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Cursor=4A s p t r i n g65 32 115 112 116 114 105 110 103
0 1 2 3 4 5 6 7 8
Cursor = 3Key = ‘p’
Typing a Character
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Cursor = 3Key = ‘p’
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] }Text[Cursor] = Key;Cursor = Cursor+1;
Typing a Character
Cursor = 3Key = ‘p’I=8
A s t r i n g g65 32 115 116 114 105 110 103 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] } move character up one spaceText[Cursor] = Key;Cursor = Cursor+1;
Typing a Character
Cursor = 3Key = ‘p’I=7
A s t r i n n g65 32 115 116 114 105 110 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] } move character up one spaceText[Cursor] = Key;Cursor = Cursor+1;
Typing a Character
Cursor = 3Key = ‘p’I=6
A s t r i i n g65 32 115 116 114 105 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] } move character up one spaceText[Cursor] = Key;Cursor = Cursor+1;
Typing a Character
Cursor = 3Key = ‘p’I=5
A s t r r i n g65 32 115 116 114 114 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] } move character up one spaceText[Cursor] = Key;Cursor = Cursor+1;
Typing a Character
Cursor = 3Key = ‘p’I=4
A s t t r i n g65 32 115 116 116 114 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] } move character up one spaceText[Cursor] = Key;Cursor = Cursor+1;
Typing a Character
Cursor = 3Key = ‘p’I=3
A s p t r i n g65 32 115 112 116 114 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] }Text[Cursor] = Key; add the typed characterCursor = Cursor+1;
Typing a Character
Cursor = 4Key = ‘p’I=3
A s p t r i n g65 32 115 112 116 114 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Text.length-1 down to Cursor){ Text[I+1]=Text[I] }Text[Cursor] = Key;Cursor = Cursor+1; move the cursor over
Algorithms for Basic Word Processing
• Type a characterDelete a character
• Select some characters
• Bold some characters
• Cut / Copy / Paste
Delete a Character
Cursor = 4Key = deleteI=?
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } move a character down one spaceCursor = Cursor-1;Text[Text.length-1] = “no character”
A s p t r i n g65 32 115 112 116 114 105 110 103
0 1 2 3 4 5 6 7 8
Delete a Character
Cursor = 4Key = deleteI=3
A s t t r i n g65 32 115 116 116 114 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } move a character down one spaceCursor = Cursor-1;Text[Text.length-1] = “no character”
Delete a Character
Cursor = 4Key = deleteI=4
A s t r r i n g65 32 115 116 114 114 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } move a character down one spaceCursor = Cursor-1;Text[Text.length-1] = “no character”
Delete a Character
Cursor = 4Key = deleteI=5
A s t r i i n g65 32 115 116 114 105 105 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } move a character down one spaceCursor = Cursor-1;Text[Text.length-1] = “no character”
Delete a Character
Cursor = 4Key = deleteI=6
A s t r i n n g65 32 115 116 114 105 110 110 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } move a character down one spaceCursor = Cursor-1;Text[Text.length-1] = “no character”
Delete a Character
Cursor = 4Key = deleteI=7
A s t r i n g g65 32 115 116 114 105 110 103 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } move a character down one spaceCursor = Cursor-1;Text[Text.length-1] = “no character”
Delete a Character
Cursor = 3Key = deleteI=8
A s t r i n g g65 32 115 116 114 105 110 103 103
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } Cursor = Cursor-1; move the cursor overText[Text.length-1] = “no character”
Delete a Character
Cursor = 3Key = deleteI=8
A s t r i n g65 32 115 116 114 105 110 103 ###
0 1 2 3 4 5 6 7 8
For ( index I starting at Cursor+1 up to Text.length-1){ Text[I-1]=Text[I] } Cursor = Cursor-1;Text[Text.length-1] = “no character”; blank out last character
A Helpful Function
Function moveChars(Text,Start,End,Distance){ if (Distance>0)
{ for (index I from End down to Start){ Text[I+Distance]=Text[I];}
}Else
{ for (index I from Start up to End)
{ Text[I+Distance]=Text[I] }}
}
Typing a Character
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Cursor = 3Key = ‘p’
moveChars(text,Cursor,text.length-1, 1);Text[Cursor]=Key;Cursor=Cursor+1;
Delete a Character
Cursor = 4Key = deleteI=?
moveChars(text,cursor,text.length-1,-1);Cursor=Cursor-1;text[text.length -1]=no character;
A s p t r i n g65 32 115 112 116 114 105 110 103
0 1 2 3 4 5 6 7 8
Algorithms for Basic Word Processing
• Type a character
• Delete a characterSelect some characters
• Bold some characters
• Cut / Copy / Paste
Selecting Characters
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Start = 2End = 7
Algorithms for Basic Word Processing
• Type a character
• Delete a character
• Select some charactersBold some characters
• Cut / Copy / Paste
Bolding Characters
Start = 2End = 7
moveChars(text,End,text.length-1,2);moveChars(text,Start,End-1,1);Text[Start]=code for start bold;Text[End+1]=code for end bold;End=End+2;
A s t r i n g65 32 115 116 114 105 110 103 ### ###
0 1 2 3 4 5 6 7 8 9
Bolding Characters
Start = 2End = 7
moveChars(text,End,text.length-1,2); -> moveChars(text,7,7,2)moveChars(text,Start,End-1,1);Text[Start]=code for start bold;Text[End+1]=code for end bold;End=End+2;
A s t r i n g g65 32 115 116 114 105 110 103 ### 103
0 1 2 3 4 5 6 7 8 9
Bolding Characters
Start = 2End = 7
moveChars(text,End,text.length-1,2);moveChars(text,Start,End-1,1); -> moveChars(text,2,6,1)Text[Start]=code for start bold;Text[End+1]=code for end bold;End=End+2;
A s s t r i n g65 32 115 115 116 114 105 110 ### 103
0 1 2 3 4 5 6 7 8 9
Bolding Characters
Start = 2End = 7
moveChars(text,End,text.length-1,2);moveChars(text,Start,End-1,1); Text[Start]=code for start bold;Text[End+1]=code for end bold;End=End+2;
A ## s t r i n g65 32 <b> 115 116 114 105 110 ### 103
0 1 2 3 4 5 6 7 8 9
Bolding Characters
Start = 2End = 7
moveChars(text,End,text.length-1,2);moveChars(text,Start,End-1,1); Text[Start]=code for start bold;Text[End+1]=code for end bold;End=End+2;
A ## s t r i n ## g65 32 <b> 115 116 114 105 110 </b> 103
0 1 2 3 4 5 6 7 8 9
Bolding Characters
Start = 2End = 9
moveChars(text,End,text.length-1,2);moveChars(text,Start,End-1,1); Text[Start]=code for start bold;Text[End+1]=code for end bold;End=End+2;
A ## s t r i n ## g65 32 <b> 115 116 114 105 110 </b> 103
0 1 2 3 4 5 6 7 8 9
Algorithms for Basic Word Processing
• Type a character
• Delete a character
• Select some characters
• Bold some charactersCut / Copy / Paste
Cut
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Start = 2End = 7
ClipBoard=
For (each character C with index >= Start and < End){ copy C to the ClipBoard }moveChars(text,End,text.length-1,Start-End);Set the last (End-Start) characters in the array to “no character”End=Start;
Cut
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Start = 2End = 7
ClipBoard=“strin”
For (each character C with index >= Start and < End){ copy C to the ClipBoard }moveChars(text,End,text.length-1,Start-End);Set the last (End-Start) characters in the array to “no character”End=Start;
Cut
A g t r i n g65 32 103 116 114 105 110 103
0 1 2 3 4 5 6 7
Start = 2End = 7
ClipBoard =“strin”
For (each character C with index >= Start and < End){ copy C to the ClipBoard }moveChars(text,End,text.length-1,Start-End);Set the last (End-Start) characters in the array to “no character”End=Start;
Cut
A g65 32 103 ### ### ### ### ###
0 1 2 3 4 5 6 7
Start = 2End = 7
ClipBoard =“strin”
For (each character C with index >= Start and < End){ copy C to the ClipBoard }moveChars(text,End,text.length-1,Start-End);Set the last (End-Start) characters in the array to “no character”End=Start;
Cut
A g65 32 103 ### ### ### ### ###
0 1 2 3 4 5 6 7
Start = 2End = 2
ClipBoard =“strin”
For (each character C with index >= Start and < End){ copy C to the ClipBoard }moveChars(text,End,text.length-1,Start-End);Set the last (End-Start) characters in the array to “no character”End=Start;
Copy
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Start = 2End = 7
ClipBoard =“strin”
For (each character C with index >= Start and < End){ copy C to the ClipBoard }
Paste
Start = 2End = 2
ClipBoard =“strin”
A s 65 32 115
0 1 2
moveChars(text,End,text.length-1, ClipBoard.length);Copy the characters from ClipBoard into the array at index Start
Paste
A g g65 32 103 ### ### ### ### 103
0 1 2 3 4 5 6 7
Start = 2End = 2
ClipBoard =“strin”
moveChars(text,End,text.length-1, ClipBoard.length);Copy the characters from ClipBoard into the array at index Start
Paste
A s t r i n g65 32 115 116 114 105 110 103
0 1 2 3 4 5 6 7
Start = 2End = 2
ClipBoard =“strin”
moveChars(text,End,text.length-1, ClipBoard.length);Copy the characters from ClipBoard into the array at index Start
Review
• Other encodings besides <b></b>• Translating between encodings can modify or lose
information• Text is just an array
– Typing a character - move characters right– Deleting a character - move characters left– Selecting - Start and End are array indices– Cut - copy to clip board and move characters left– Copy - copy to clip board– Paste - move characters right and copy from clip board