CS 200
Lecture 02
Structured Word Processing — Styles
CS 200 Winter 2020 1 02 – Styles
Miscellaneous Notes
Assigned reading
• “The Non–Designer’s Design Book,” by Robin Williams (first half)
• “Adobe on Basic Typography” (https://www.student.cs.uwaterloo.ca/~cs200/Adobe/ main.html)
Please read and highlight before this week’s lab
• Assignment 2 (due Monday January 21 at 11:59 pm) • Notes for this lecture
Today and Thursday • [named] styles • the Poke pearl • backups
CS 200 Winter 2020 2
02 – Styles
What happens if you
• double-clickhere?
• triple-clickhere?
• option-clickhere?
• control-clickhere?
• command-clickhere? • etc…
What happens if you
• clickanddragonthis?
• option-clickanddragonthis?
• control-clickanddragonthis?
• command-clickanddragonthis? • etc…
The Poke Pearl
CS 200 Winter 2020 3
02 – Styles
Assumptions
You have used a word processor before
You understand and correctly use the following WP tools
• WordWrap(hardcarriagereturnvs.softcarriagereturn) • Cut/CopyandPaste
• Fontusage(size,styleandtypeface)
• RulersandMargins
• Properuseoftabs
• Headersandfooters(pagenumbering)
• Footnotes
CS 200 Winter 2020 4
02 – Styles
Things to Think About
• WhatarethedataobjectsinaWordProcessor? • Istheremorethanonewaytodoanygiventask? • Whataredeficienciesoftheinterface?
• Whatareefficienciesoftheinterface?
CS 200 Winter 2020 5
02 – Styles
[Named] Styles (1)
The idea
• name a collection of paragraph or character attributes
• you then apply the NAME to text instead of individually setting attributes
Hence changing a document’s appearance is
• easier & faster, more accurate (⇒consistency, if used intelligently)
• — you just change the definition of the name; everywhere it’s used, text changes
Does appearance matter? → Yes! • legibility
• understandability • professionalism
CS 200 Winter 2020 6
02 – Styles
Named Styles (2)
Terminology
• Attributes: Helvetica, Palatino, bold, italic, underlined, red, 15 pt leading, etc. are
attributes
• [Named Style]: A (named) style is a (specific) “bundle of attributes” • We usually specify that it is a “named style” for emphasis/clarity
• ex. “Heading” could be a named style with attributes “24 pt Myriad Pro Light with 12 pts of Before Paragraph leading & 2 cm of left indent”
CS 200 Winter 2020 7
02 – Styles
Compare this and the preceding slide
Terminology Attributes: Helvetica, Palatino, bold, italic, underlined, red, 15 pt leading, etc. are attributes [Named Style]: A (named) style is a (specific) “bundle of attributes” We usually specify that it is a “named style” for emphasis/clarity ex. “Heading” could be a named style with attributes “24 pt Myriad Pro Light with 12 pts of Before Paragraph leading & 2 cm of left indent”
CS 200 Winter 2020 8
02 – Styles
Indirection
The underlying concept is indirection
• referringtosomethingthroughsomethingelse
Indirection is useful in many contexts, including… • drawingprograms(objectproperties)
• HTML(tagsinwebpages;CSS)
• electronicmail(aliases,forwards)
• spreadsheets(namedcells/ranges) Remember the Model pearl?
CS 200 Winter 2020 9
02 – Styles
The text being formatted
The style definitions (built-in & user-defined)
Block
Font:(Default) Times, 12 pt, English (US), Justified, Line spacing: single, Space Before: 6 pt, Widow/Orphan control
Block_Centered
Font:(Default) Times, 12 pt, English (US), Centered, Line spacing: single, Widow/Orphan control, No bullets or numbering
Default Paragraph Font
The font of the underlying paragraph style +
Emphasis_Slight
Default Paragraph Font + Font:Italic
Figure_Caption
Font:(Default) Times, 10 pt, English (US), Indent: Left: 0.39”, Right: 0.39”, Justified, Line spacing: exactly 12 pt, Space Before: 6 pt, Widow/Orphan control
Footer
Font:(Default) Times, 10 pt, English (US), Left, Line spacing: single, Widow/ Orphan control, Tabs: 3.25”, Centered + 6.5”, Right
Footnote Reference
Default Paragraph Font + Superscript
Footnote Text
Font:(Default) Times, 10 pt, English (US), Justified, Line spacing: exactly 10 pt, Space Before: 4 pt, Widow/Orphan control
Header
Font:(Default) Times, 10 pt, English (US), Left, Line spacing: single, Widow/ Orphan control, Tabs: 3.25”, Centered + 6.5”, Right
Heading 1
Style for Next Paragraph: Block, Font:(Default) Times, 12 pt, Bold, English (US), Centered, Line spacing: single, Space Before: 14 pt, Widow/Orphan control, Keep with next, Level 1
Heading 2
Style for Next Paragraph: Block, Font:(Default) Times, 12 pt, Bold, English (US),
Left, Line spacing: single, Space Before: 10 pt, Widow/Orphan control, Keep with next, Level 2
Instruction
Style for Next Paragraph: Instruction_Expl, Font:(Default) Courier, 11 pt, English (US), Indent: Left: 0.2”, Left, Line spacing: single, Space Before: 6 pt, Widow/ Orphan control, Keep with next
•••
Demo 1
CS 200 Winter 2020
10
02 – Styles
Naming Named Styles
Style names should reflect function, not appearance
“Quotation” not “Emphasis” not “List Item” not
“Indented Paragraph” “Bold”
“Bulleted Paragraph”
Style names
should be chosen logically
— NOT based on their appearance
so if you change the appearance,
you don’t have to change the name,
and you avoid confusion
CS 200 Winter 2020 11
02 – Styles
Home > Preferences…
to bring up
The text being formatted
Showing Style Usage in MS Word
In Draft view, the “style area width” controls the width of the style name column in the doc display; if it’s zero, the style name column vanishes.
In Draft view, View > Reveal Formatting
to enable the (yellow) Formatting popup
3.99cm
CS 200 Winter 2020
12
02 – Styles
Showing Style Usage in MS Word cont’d
Home > Styles Pane…
to bring up
CS 200 Winter 2020 13
02 – Styles
Hierarchical Styles
The idea
• styleBis“everythingstyleAis,exceptfor…” • style C is “everything style B is, except for . . .” • etc.
Style A
Helvetica, 24 pt, Bold
Style B
Helvetica, 22 pt, Bold
Style D
Times, 22 pt, Bold
Style C
Helvetica,24 pt, Italics
Style E
Helvetica, 26 pt, Italics
CS 200 Winter 2020
14
02 – Styles
Hierarchical Styles cont’d
When you change an attribute of A’s definition
• stylesbasedonAchange,too,unlessthatattributehasbeenexplicitlysetforthe derived style
Style A
Palatino, 24 pt, Bold
Style B
Palatino, 22 pt, Bold
Style D
Times, 22 pt, Bold
Style C
Palatino,24 pt, Italics
Style E
Palatino, 26 pt, Italics
CS 200 Winter 2020
15
02 – Styles
Hierarchical Styles Relativity
There are choices in how to implement some aspects of this;
eg, if I change B’s font size, is the new value
• absolute(MSWord),orrelativetothesizeofA?
• doeschangingA’ssizelaterautomaticallychangeB’s? • byafixednumberofpoints,orbyapercentage?
Ditto with paragraph indents
Style B
Palatino, ?? pt, Bold
Style D
Times, ?? pt, Bold
Etc.
Style A
Palatino, 28 pt, Bold
Style C
Palatino, ?? pt, Italics
Style E
Palatino, ?? pt, Italics
CS 200 Winter 2020
16
02 – Styles
Hierarchical Styles — Comments
Comments
• thisisaMODELofnamedstyles,thoughwithparameters
• there’snopointtothisunlessparentandchildstyles:
• •
• youmighthaveaforestinsteadofatree
(our previous example had no hierarchy at all — a forest of flat trees, so to speak)
In the “Files for Styles Lectures” under Week 2: Styles on Learn, compare • UserManualExtract(Tree)
• UserManualExtract(Forest)
share some attributes
but not others
CS 200 Winter 2020 17
02 – Styles
The Paragraph Styles Tree for User Manual Extract
T
Block_Centered is a poorly chosen name because it refers to the appearance of the text tagged with this named style, instead of the text’s purpose
CS 200 Winter 2020 18
02 – Styles
A Paragraph Style Sheet for UME.doc Using Multiple Trees
Built-in styles
(The names are built-in, however the
User-defined styles
Block
Body_Abstract + Justified, Space Before: 6 pt
Block_Centered
Block + Centered, Numbered
Body_Abstract Normal +
Emphasis_Slight
Default Paragraph Font + Font:Italic
Figure_Caption
Body_Abstract + Font:10 pt, Indent: Left: 0.39″, Right: 0.39″, Justified, Line spacing: exactly 12 pt, Space Before: 6 pt
Heading_Abstract
Normal +
Instruction
Style for Next Paragraph: Instruction_Expl
Body_Abstract + Font:Courier, 11 pt, Indent: Left: 0.2″, Space Before: 6 pt, Keep with next
Instruction_Expl
Body_Abstract + Indent: Left: 0.44″, Numbered
Instruction_Item
Style for Next Paragraph: Instruction_Expl
Body_Abstract + Font:10 pt, Indent: Left: 0.63″, Hanging: 0.19″, Line spacing: exactly 12 pt
Item
Body_Abstract + Indent: Left: 0.19″, Hanging: 0.19″, Space Before: 6 pt
MenuItem
Body_Abstract + Font:Courier, 11 pt, Indent: Left: 0.19″, Line spacing: exactly 12 pt, Space Before: 9 pt, Numbered
MenuItem_Expl
Body_Abstract + Indent: Left: 0.44″
Operand
Body_Abstract + Indent: Left: 0.25″
Operand_Expl
Body_Abstract + Indent: Left: 0.56″, Space Before: 6 pt
•••
Default Paragraph Font
The font of the underlying paragraph style +
Footer
Normal + Font:10 pt, Right: 0.25″, Tabs: 3.25″, Centered + 6.5″, Right
Footnote Reference
Default Paragraph Font + Superscript
Footnote Text
Normal + Font:10 pt, Justified, Line spacing: exactly 10 pt, Space Before: 4 pt
Header
Normal + Tabs: 3″, Centered + 6″, Right
Heading 1
Style for Next Paragraph: Block
Heading_Abstract + Font:Bold, Centered, Space Before: 14 pt, Keep with next,
Level 1
Heading 2
Style for Next Paragraph: Block
Heading_Abstract + Font:Bold, Space Before: 7 pt, Keep with next, Level 2
No List
No List +
Normal
Font:(Default) Times New Roman, 12 pt, English (US), Left, Line spacing: single, Space Before: 3 pt, Widow/Orphan control
Page Number
Default Paragraph Font +
Table Normal
Font:(Default) Times New Roman, 10 pt, Left, Line spacing: single, Widow/Orphan control
CS 200 Winter 2020 19
02 – Styles
Demo 2!
Character Styles
Should character attributes be part of a paragraph style definition?
Are character styles hierarchical?
• yesinMSWord
• noinFrameMaker
• yesinNisusWriterExpress&NisusWriterPro • yesinAdobeInDesign
Are character styles used to specify the (default) character attributes of paragraph styles? • noinMSWord
• optionallyinNisusWriterExpress&Pro
Incidentally, if you own a Mac, Nisus Writer Pro is a very nice $39 US (ed) word processor (www.nisus.com).
CS 200 Winter 2020 20
02 – Styles
Tables-of-Contents (TOCs)
What’s our model of a TOC? (example on the next slide)
Steps to create a table-of-contents
• identify paragraph styles from which to build the TOC
• ex. Heading 1, Heading 2, Heading 3, etc, in Word • specify a TOC style for each TOC level
•TOC 1, TOC 2, TOC 3, etc, in Word
• build the TOC (most word processors do this for you)
• copy paragraphs with specified paragraph style tags into the TOC • apply the corresponding TOC style to each
• Heading 1 to TOC 1, Heading 2 to TOC 2, Heading 3 to TOC 3, etc. • append a tab character & page number to each
• modify the TOC styles to get the desired layout • rebuild the TOC whenever appropriate
Note the application of two distinct styles to each piece of text
Demo 3!
CS 200 Winter 2020 21
02 – Styles
Demo — The TOC for User Manual Extract
CS 200 Winter 2020 22
02 – Styles
Display or not display
Print or not print
• inMSWordtheseareseparateattributes • isthatagoodidea?
Look up “Hidden Text” in Word’s help index
Word only implements one class of conditional text
• butitmakessensetohavemore
• youcansimulatehavingmorethanone
class of conditional text using named styles
Conditional Text
CS 200 Winter 2020 23
02 – Styles
How would you do this?
Demo 4!
Format → Style…
Interaction techniques
A preview checkbox would be better. & everywhere—
not just here.
The Format > Style… Dialog in Word
CS 200 Winter 2020 24
02 – Styles
The Format > Style… > Modify Style sub-dialog
Recall the Model Pearl (interaction)
• Nesteddialogboxes
+ radio buttons, check boxes, etc.
• Whichisbetter?Shouldyouhaveboth?
CS 200 Winter 2020
25
02 – Styles
Use this dropdown menu
to change more attributes
The Format > Style… > Organizer sub-dialog
CS 200 Winter 2020 26
02 – Styles
Word’s Format > Paragraph dialog box
Not all paragraph attributes are available in this dialog ex. bullets, borders…
although they belong here
CS 200 Winter 2020 27
02 – Styles
when/why “Exactly?”
Widows and Orphans
Widow
stranded line at top of page
Orphan
stranded line at bottom of page
CS 200 Winter 2020 28
02 – Styles
Word’s Format > Font… (ie. Character) dialog box
CS 200 Winter 2020 29
02 – Styles
Style Templates
Store style definitions in a separate “template” or “style sheet” file Use templates to keep styles
consistent across multiple documents
• eachsuchdocumentislinkedtothetemplate
• whenthetemplateischanged,
the appearance of every linked document
• •
Another data model…
Tools g Templates and Add- ins…
changes automatically? (optional in MS Word) or do you have to request an update? (Keynote)
CS 200 Winter 2020 30
02 – Styles
Style Templates in MS Word
Every document is based on a template (“Normal” by default)
• apparentlyinthe“~/Documents/MicrosoftUserData/“folder…
(instead of ~ / Library / Application Support / Microsoft … sigh)
• whosestylesarecopiedtothedocument To use a different base template
• usethe“Attach”buttonintheTools→TemplatesandAdd-ins…
dialog box
To have Word reload the template’s styles every time you
open the document
• check“AutomaticallyUpdateDocumentStyles”
in the Tools → Templates and Add-ins… dialog box
To cause a style change applied in a document to update
its template definition
• Usethe“Addtotemplate”buttonintheModifyStyles
dialog box, or change it directly in the template
CS 200 Winter 2020 31
02 – Styles
“Invisible” (aka “non-printing”) characters
See Word’s Preferences > View dialog Or, press from Word’s Home menu
CS 200 Winter 2020
32
02 – Styles
Things That May Confuse You in MS Word
Character attributes in paragraph styles
• areamatterofconvenience
• whendone,onesetofcharacterattributesisapropertyoftheparagraphasawhole
The Style Column
• isvisibleonlyinOutlineorDraftView,notWebLayoutorPrintLayout
Some paragraph attributes
• arein“auxiliary”dialogboxesinsteadoftheparagraphdialogbox
even though they are paragraph attributes
• ex.borders,bullets,numbering,shading
Paragraph attributes
• are“storedin”the¶attheendofeachparagraph
• areautomaticallycopiedtoanewparagraphifyoupressRETURN
• youcancopy/pastethischaractertotransferitsattributestoanotherparagraph
CS 200 Winter 2020 33
02 – Styles
The Case For Styles
It’s easier / quicker to change
• theappearanceofanexistingdocument
• determinetheappearanceofaconformingdocument
They make it easier to achieve consistent appearance • withinadocument
• usingtemplates,acrossdocuments
You can switch media much more easily
CS 200 Winter 2020 34
02 – Styles
It takes longer to get started
CS 200 Winter 2020 35
02 – Styles
The Case Against
Application Interface and Design
In well-designed applications you can do everything via • menuitems
• dialogboxesopenedbyamenuitem
• atoolbaropenedfromamenuitem
— Why?
Often there are other ways of doing things • typicallyfasterbutmoreobscure
— Why?
Are there other ways to
• DEFINEnamedstylesinWord? • APPLYnamedstylesInWord?
Explore the Styles pull-down in the Formatting toolbar • (ThePokepearl)
CS 200 Winter 2020 36
02 – Styles
Styles & Style Templates (aka “Style Sheets”) Elsewhere
These ideas are applicable anywhere you have objects with attributes,
though the term may not be used
• graphicsapplications • printing
• webpages
So look for them!
CS 200 Winter 2020 37
02 – Styles
Huh? Think about this…
Next Week
Pixel Graphics
Have a digital photo ready for lab next week.
CS 200 Winter 2020 38
02 – Styles