Encode Style
¶Introduction
Cascading Style Sheets (known colloquially as CSS) is a language used to describe
the presentation of documents. We use CSS to style the aesthetics of our website (font,
color, spacing, etc.) and to describe the layout of particular documents (for example,
see the title page of The Sun in Aries). CSS is a useful tool for MoEML because its history and vocabulary originate in
the print industry; in its approach and terminology it embodies the traditions of
the printers and typesetters of early printed books. At the same time, however, it
is a modern web language that supports many new textual features of the digital age,
such as drop-shadows, hyperlinks, and cursors.
¶TEI versus CSS
Text styles (italics, bold, quotation marks, etc.) can be rendered either by tagging
a text using TEI or by tagging a text using CSS. Most text styles can be rendered
by tagging a text using TEI elements, attributes, and values that describe the text
type as defined by the author or inferred by the encoder. That said, in some instances,
TEI will be inadequate for tagging text styles. Possible reasons include:
-
TEI does not have an element, attribute, and value combination to describe the text type
-
TEI does have an element, attribute, and value combination to describe the text type, but the standard style associated with the text type is unsatisfactory (primary source transcriptions only)
-
There is no apparent reason why text is styled (primary source transcriptions only)
Consider the following example from a born-digital text in which the author/encoder
uses TEI to tag text style:
<p>There are other attributes you will use when encoding a <emph>duration</emph> or an <emph>imprecise date</emph>.</p>
When writing this sentence, the author likely knew that they wanted to emphasize certain
words, so they used the
<emph>
tag. It was not the author’s job to decide how these emphases should be rendered
in the output; they simply needed to express their intention. It is therefore easy
for any author to express their intentions by using TEI tags. As it happens, in the
rendering process, the <emph>
tag is converted to an HTML em
tag, which is, by default, rendered as italic by modern browsers. When authoring
a born-digital text, you should never need to use CSS because meaning and intent can be expressed through semantic TEI
tags, which are rendered in accordance with a site-wide style guide.For contrast, consider the following example from a primary source text in which the
encoder uses CSS to tag text style:
<p>Therein is placed the ſhadow of <name ref="mol:FITZ5">Sir <hi style="font-style: italic;">Henry Fitz-Alwine</hi></name>, to grace this dayes honour</p>
In this example, the
<hi>
element with the @style
attribute and "font-style: italic"
value is used to describe the italicization of Henry Fitz-Alwine.The encoder cannot determine with any certainty why the printer italicized it; the encoder can only describe it using CSS.
¶Use TEI to Style a Text
The following table outlines how to encode some common types of text using TEI elements,
attributes, and values.
Text Type | TEI Code | Rendered Text |
Monograph and book titles |
<title level="m">War and Peace</title>
|
War and Peace |
Journal/periodical titles |
<title level="j">Notes and Queries</title>
|
Notes and Queries |
Article or chapter titles |
<title level="a">Using Early Modern Maps in Literary Studies:
Views and Caveats from London</title>
|
Using Early Modern Maps in Literary Studies: Views and Caveats from London |
Emphasized text |
You <emph>must not</emph> generate invalid files.
|
You must not generate invalid files. |
Foreign text |
<foreign>Veni, vidi, vici</foreign>
|
Veni, vidi, vici |
Mentioned text |
We use the term <mentioned>toponymist</mentioned> to designate the person who identifies the place referenced in a text and points
to the right place in our locations database.
|
We use the term toponymist to designate the person who identifies the place referenced in a text and points to the right place in our locations database. |
Disputed terms and phrases |
Colloquially known as <soCalled>Poets’ Corner</soCalled>, Westminster Abbey is the final resting place of Geoffrey Chaucer, Ben Jonson, Francis
Beaumont, and many other notable authors.
|
Colloquially known as Poets’ Corner,Westminster Abbey is the final resting place of Geoffrey Chaucer, Ben Jonson, Francis Beaumont, and many other notable authors. |
Inline quotations |
<quote>Tomorrow and tomorrow and tomorrow</quote>
|
Tomorrow and tomorrow and tomorrow |
Block quotations |
<cit>
<quote>Smaller playing areas meant less reliance on fencing and acrobatics, stable features of plays by adult troupes. Better acoustics allowed dramatists to call for subtler and more varied musical effects, a distinct advantage for choirboy companies, trained in signing and the playing of instruments <gap reason="editorial"/> The intimacy of a hall playhouse or a banqueting hall at court also encouraged dramatists to write for socially cohesive audiences capable of appreciating subtle allusions to specific individuals, issues and situations and to shared concerns about events in the world of the play.</quote> </cit> |
Smaller playing areas meant less reliance on fencing and acrobatics, stable features of plays by adult troupes. Better acoustics allowed dramatists to call for subtler and more varied musical effects, a distinct advantage for choirboy companies, trained in signing and the playing of instruments Gap in transcription. Reason: Editorial omission for reasons of length or relevance. Use only in quotations in born-digital documents.[…] The intimacy of a hall playhouse or a banqueting hall at court also encouraged dramatists to write for socially cohesive audiences capable of appreciating subtle allusions to specific individuals, issues and situations and to shared concerns about events in the world of the play. |
Lines of verse |
<lg>
<l>Nor are the duties that thy ſubjects owe,</l> <l>Only compriz’d in this externall ſhow.</l> <l>For harts are heap’d with thoſe innumered hoords,</l> <l>That tongues by vttrance cannot vent in words.</l> </lg> |
Nor are the duties that thy ſubjects owe,
Only compriz’d in this externall ſhow.
For harts are heap’d with thoſe innumered hoords,
That tongues by vttrance cannot vent in words.
|
Note that titles can be represented differently in other publications. Rather than
reproducing styles that do not conform to our editorial style manual, make sure to encode truthfully. In other words, do not reproduce quotation marks
that are meant to signify monograph title. Instead, encode that string of text using the
<title>
element with a @level
value of "m"
. Then leave an explanatory note in the encoding. For example, see the BIBL1.xml entry
for MORR2:
<bibl xml:id="MORR2" type="sec"><author>Morrison, John</author>. <title level="a">Strype’s Stow: The 1720 Edition of <title level="m">A Survey of London</title></title>. <!-- BUTT1: The title of "A Survey of London" appears in quotation marks in the journal.
I have not reproduced this infelicity. -->
<title level="j">The London Journal</title> 3.1 (<date when="1977">1977</date>): 40–54. doi:<idno type="DOI">10.1179/030580377793317557</idno>.</bibl>
In some circumstances MoEML’s schema will not support a TEI element, attribute, and/or
value needed to tag a text type. In these cases, contact Martin Holmes to discuss the issue. It is bad practice to tag text with an incorrect tag in order
to make it appear in a certain style.
¶Use CSS to Style a Text
To tag text style using CSS, use the general-purpose
<hi>
element and the @style
attribute with CSS-specified values. For example:
<p>This text is italic: <hi style="font-style: italic;">italic text</hi></p>
Any text style written in CSS code will be automatically passed through to the output
web page. Multiple styling properties can be chained together using semicolons:
<p>This text is bold and italic: <hi style="font-weight: bold; font-style: italic;">bold italic text</hi></p>
Note that, because
@style
is a global attribute, it can be applied to any XML element (not just the <hi>
element). For example, it is possible to apply style to a <p>
element using the @style
attribute with CSS values:
<p style="margin-left: 4em; text-indent: 1.5em;">The ſpeaker in this Pageant is Edward the third, the laſt Line of his ſpeech is repeated
by all the reſt in the Chariot.</p>
Remember that certain TEI elements may already have style properties associated with
them, so the
@style
element might alter or overwrite these existing style properties when used.The following CSS properties are most used by MoEML encoders:
-
"font"
-
"text"
-
"display"
-
"margin"
-
"padding"
-
"float"
-
"height"
-
"width"
-
"vertical-align"
Some of the aforementioned properties, such as the
"font"
or "text"
properties, can be applied at any level of the text, from block levels such as paragraphs
down to inline levels such as individual <hi>
tags around a word. Other properties, however, can only be used at the block level.
For instance, "text-align:center"
makes sense for a <p>
or a <head>
, but not for a word inside a paragraph.The W3Schools website is a useful resource for learning CSS. This website provides a complete reference
for CSS, as well as an introduction to basic CSS concepts, and information about CSS3,
the latest version of the web language.
¶Use the <rendition>
Element and @rendition
Attribute
The previous section outlined how to use the
@style
attribute and CSS language to produce isolated instances of style properties. Some
documents, however, require frequent repetition and standardization of style properties.
In a long work like Survey of London, marginal notes and labels tend to appear the same way throughout the volume. It
is not practical to describe the font, placement, and font weight over and over. Instead,
we can describe the properties of a marginal label (for example) once in the <teiHeader>
, and refer back to this description in our tagging of individual marginal labels.
This section outlines how to use the <rendition>
element and @rendition
attribute to write, use, and reuse sets of style properties.-
If it does not already exist, add a
<tagsDecl>
element inside the<encodingDesc>
element in the header of the file.<encodingDesc>
<tagsDecl></tagsDecl>
</encodingDesc> -
Inside
<tagsDecl>
element, add a<rendition>
element. Add to the<rendition>
element both a@scheme
attribute with a value of"css"
as well as an@xml:id
attribute with a unique value. The@xml:id
value should consist of the document name followed by an underscore (_) and a descriptor. The first<rendition>
element of METR1.xml serves as an example:<rendition scheme="css" xml:id="METR1_lmlabel"></rendition> -
Inside the
<rendition>
element, add a text string that defines a set of CSS style properties. For example, the first<rendition>
element of METR1.xml defines the style properties for marginal labels:<rendition scheme="css" xml:id="METR1_lmlabel">display: block; float: left; margin-left: -5em; width: 5em;</rendition> -
You may add as many rendition elements as your document requires inside the
<tagsDecl>
element. For example, consider the following:<encodingDesc>
<tagsDecl>
<rendition scheme="css" xml:id="SAMP1_foot">text-align: left; font-size: 60%;</rendition>
<rendition scheme="css" xml:id="SAMP1_head">text-align: left; font-style: italic;</rendition>
<rendition scheme="css" xml:id="SAMP1_scenetitles">text-align: center; font-weight: bold; font-size: 150%;</rendition>
<rendition scheme="css" xml:id="SAMP1_scenedesc">font-style: italic; outline-style: ridge; outline-color: red;</rendition>
</tagsDecl>
</encodingDesc> -
Use the
@rendition
attribute within the<body>
of your document to reference and apply a particular set of style rules. Each set of style rules can be referenced by using its@xml:id
as the value for the@rendition
attribute. For example, suppose that you wanted to apply the set of style rules for a header as defined in the previous sample; you would do so as follows:<fw rendition="#SAMP1_head" type="header">Insert text of the header here.</fw>
¶Standardized Renditions
When it comes to adding CSS to transcriptions of primary sources, our overriding concern
is to tell the truth. While we want to use CSS to describe how a text looks, we do not want to add CSS
that takes a lot of guesswork and tweaking on behalf of the encoder. For example,
it is impossible to discern exactly how large a dropcap is, especially when our reference
is a scan of a facsimile. Standardized renditions, therefore, provide a quick way
to style the main components of a text (i.e., headings, dropcaps) for the reader.
In 2020, a group of standardized renditions was created for MoEML’s (1) library texts
and (2) editions of Survey of London. These standardized renditions are explained below.
¶Standardized Renditions for Library Texts
Below is the
<tagsDecl>
from The Magnificent Entertainment:
<tagsDecl>
<rendition scheme="css" xml:id="MAGN3_mainHead">font-family: Georgia; text-align: center; font-size: 150%; margin-bottom: 1em; margin-top: 1em;</rendition>
<rendition scheme="css" xml:id="MAGN3_subHead">font-family: Georgia; text-align: center; font-size: 100%; margin-bottom: 1em; margin-top: 1em;</rendition>
<rendition scheme="css" xml:id="MAGN3_dropCap">float: left; font-size: 250%; margin-right: 0.05em; padding: 0; line-height: 90%; display: inline-block;</rendition>
<rendition scheme="css" xml:id="MAGN3_indentedLine">text-indent: 2em;</rendition>
<rendition scheme="css" xml:id="MAGN3_indentedLineExtra">text-indent: 4em;</rendition>
<rendition scheme="css" xml:id="MAGN3_lmlabel">display: block; float: left; margin-left: -8em; width: 7em; font-size: 80%; line-height: 1; clear: left; font-family: "Georgia"; text-indent: 0; font-style: italic</rendition>
<rendition scheme="css" xml:id="MAGN3_rmlabel">display: block; float: right; margin-right: -8em; width: 7em; font-size: 80%; line-height: 1; clear: right; font-family: "Georgia"; text-indent: 0; font-style: italic</rendition>
</tagsDecl>
<rendition scheme="css" xml:id="MAGN3_mainHead">font-family: Georgia; text-align: center; font-size: 150%; margin-bottom: 1em; margin-top: 1em;</rendition>
<rendition scheme="css" xml:id="MAGN3_subHead">font-family: Georgia; text-align: center; font-size: 100%; margin-bottom: 1em; margin-top: 1em;</rendition>
<rendition scheme="css" xml:id="MAGN3_dropCap">float: left; font-size: 250%; margin-right: 0.05em; padding: 0; line-height: 90%; display: inline-block;</rendition>
<rendition scheme="css" xml:id="MAGN3_indentedLine">text-indent: 2em;</rendition>
<rendition scheme="css" xml:id="MAGN3_indentedLineExtra">text-indent: 4em;</rendition>
<rendition scheme="css" xml:id="MAGN3_lmlabel">display: block; float: left; margin-left: -8em; width: 7em; font-size: 80%; line-height: 1; clear: left; font-family: "Georgia"; text-indent: 0; font-style: italic</rendition>
<rendition scheme="css" xml:id="MAGN3_rmlabel">display: block; float: right; margin-right: -8em; width: 7em; font-size: 80%; line-height: 1; clear: right; font-family: "Georgia"; text-indent: 0; font-style: italic</rendition>
</tagsDecl>
Note that there are currently seven standardized renditions. These renditions should
be pasted into the
<tagsDecl>
of all future library texts. If you believe that a rendition should be tweaked or
a new rendition should be created, bring your proposal to the MoEML team.For a detailed explanation of how to use each of these renditions, see
Style a Library Text.
¶Standardized Renditions for Survey of London
Below is the
<tagsDecl>
from Aldersgate Wardin our 1598 edition of Survey of London:
<tagsDecl>
<rendition scheme="css" xml:id="stow_1598_ALDE2_R">font-family: "Georgia";</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_BL">font-family: "Blackletter";</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_IR">font-family: "Georgia"; font-style: italic;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_page">width: 34em; padding-left: 7em; padding-right: 7em; line-height: 1.2; margin-left:auto; margin-right:auto;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_chapterHead">font-family: Georgia; text-align: center; font-size: 200%; margin-bottom: 1em;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_dropCap">float: left; font-size: 180%; line-height: 1.5; padding: 1.2em 1.5em; margin: 0.2em; vertical-align: middle; border: solid 1pt black; font-family: "Georgia";</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_para" selector="p">text-indent: 2em;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_lmlabel" selector="label[place='margin-left']">display: block; float: left; margin-left: -8em; width: 7.5em; font-size: 80%; line-height: 1; clear: left; font-family: "Georgia"; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_rmlabel" selector="label[place='margin-right']">display: block; float: right; margin-right: -8em; width: 7.5em; font-size: 80%; line-height: 1; clear: right; font-family: "Georgia"; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_lpagenum" selector="fw[type='pageNum'][place='top-left']">display: block; margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: -1em; font-family: Georgia; text-indent: 0; text-align: left;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_rpagenum" selector="fw[type='pageNum'][place='top-right']">display: block; margin-top: -2.5em; margin-left: 0; margin-right: 0; margin-bottom: 1em; font-family: Georgia; text-indent: 0; text-align: right;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_runningheader" selector="fw[type='header']">display: block; text-align: center; font-size: 120%; margin-bottom: 1em; font-family: Georgia; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_catchword" selector="fw[type='catchword']">display: block; text-align: right; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_signature" selector="fw[type='signature']">display: block; text-align: center; text-indent: 0;</rendition>
</tagsDecl>
<rendition scheme="css" xml:id="stow_1598_ALDE2_R">font-family: "Georgia";</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_BL">font-family: "Blackletter";</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_IR">font-family: "Georgia"; font-style: italic;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_page">width: 34em; padding-left: 7em; padding-right: 7em; line-height: 1.2; margin-left:auto; margin-right:auto;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_chapterHead">font-family: Georgia; text-align: center; font-size: 200%; margin-bottom: 1em;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_dropCap">float: left; font-size: 180%; line-height: 1.5; padding: 1.2em 1.5em; margin: 0.2em; vertical-align: middle; border: solid 1pt black; font-family: "Georgia";</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_para" selector="p">text-indent: 2em;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_lmlabel" selector="label[place='margin-left']">display: block; float: left; margin-left: -8em; width: 7.5em; font-size: 80%; line-height: 1; clear: left; font-family: "Georgia"; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_rmlabel" selector="label[place='margin-right']">display: block; float: right; margin-right: -8em; width: 7.5em; font-size: 80%; line-height: 1; clear: right; font-family: "Georgia"; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_lpagenum" selector="fw[type='pageNum'][place='top-left']">display: block; margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: -1em; font-family: Georgia; text-indent: 0; text-align: left;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_rpagenum" selector="fw[type='pageNum'][place='top-right']">display: block; margin-top: -2.5em; margin-left: 0; margin-right: 0; margin-bottom: 1em; font-family: Georgia; text-indent: 0; text-align: right;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_runningheader" selector="fw[type='header']">display: block; text-align: center; font-size: 120%; margin-bottom: 1em; font-family: Georgia; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_catchword" selector="fw[type='catchword']">display: block; text-align: right; text-indent: 0;</rendition>
<rendition scheme="css" xml:id="stow_1598_ALDE2_signature" selector="fw[type='signature']">display: block; text-align: center; text-indent: 0;</rendition>
</tagsDecl>
Note that there are currently fourteen standardized renditions. These renditions should
be pasted into the
<tagsDecl>
of all future Survey of London texts. If you believe that a rendition should be tweaked or a new rendition should
be created, bring your proposal to the MoEML team. Below, we will break down how to use each of these renditions.¶Style Survey of London
¶Page Width
The first part of the text you will want to style is the page width. Add the
"page"
rendition to the first <div>
element:
<div xml:id="stow_1598_ALDG2_text" rendition="#stow_1598_ALDG2_page"></div>
Our standard page width is currently
"34em"
, which allows for easy reading. In CSS, you can use absolute length units (e.g.,
cm, mm) or relative length units (e.g., em, rem) to describe length. Relative length
units specify their length in relation to another length property. We used relative
length units at MoEML because they scale better when aspects of rendering—such as
browser size—change. An emspecifies its length in relation to font-size.
"34em"
, therefore, means that the page width will be 34 times the size of the font.¶Blackletter Typeface
The 1598 Survey of London is mostly set in Blackletter Gothic. Add the
"BL"
rendition (after the "page"
rendition) to the first <div>
element of all 1598 chapters:
<div xml:id="stow_1598_ALDG2_text" rendition="#stow_1598_ALDG2_page #stow_1598_ALDG2_BL"></div>
You will not need to add this rendition to the 1633 chapters.
¶Chapter Headings
Use the
"chapterHead"
rendition to style large chapter headings. For example, see the encoding of the chapter
head of Portsoken Ward:
<head rendition="#stow_1598_PORT1_chapterHead">Portſoken VVarde.</head>
If the main chapter heading contains different font sizes, you will have to edit the
CSS manually. For example, see the chapter heading of
Sports and Pastimes:
Note how chapter headings are generally defined in the
<tagsDecl>
:
<tagsDecl>
<rendition scheme="css" xml:id="stow_1598_sports_chapterHead">font-family: Georgia; text-align: center; font-size: 200%; margin-bottom: 1em;</rendition>
</tagsDecl>
<rendition scheme="css" xml:id="stow_1598_sports_chapterHead">font-family: Georgia; text-align: center; font-size: 200%; margin-bottom: 1em;</rendition>
</tagsDecl>
Since we want our CSS to be consistent throughout Survey of London, we will want to use as much of the standardized rendition as possible. In this case,
add the
@style
attribute to the heading and copy and paste the styling from the "chapterhead"
rendition, minus the the "font-size"
value:
<head style="font-family: Georgia; text-align: center; margin-bottom: 1em; text-align: center;">Sports and paſtimes of old time <lb/>vſed in this Citie.</head>
Now add font-size styling to each part of the title using the
<hi>
element and @style
attribute. The largest part of the title should have the value "font-size: 200%"
(to match the "chapterHead"
rendition):
<head style="font-family: Georgia; text-align: center; margin-bottom: 1em; text-align: center;"><hi style="font-size: 200%;">Sports and paſtimes of old time</hi><lb/> <hi style="font-size: 150%;">vſed in this Citie.</hi></head>
Remember that our overriding concern is to tell the truth. Even for more complicated headings, the font-size is always rounded to either
0or
5.For example, see the chapter heading of
Rivers and Other Waters:
<head style="font-family: Georgia; text-align: center; margin-bottom: 1em; text-align: center;"><hi style="font-size: 200%;">Of the Auncient and Preſent Riuers,</hi> <hi style="font-size: 140%;">Brooks, Boorns, Pooles, wels, and Conduites of<lb/> freſh water, ſeruing the Citie, as alſo of the</hi><lb/> <hi style="font-size: 125%;">ditch, compaſſing the wall of<lb/> the ſame.</hi></head>
It is impossible to discern the exact font-size of each part of the title by looking at the facsimile. Therefore, do not
spend a lot of time making your CSS overly specific (i.e.,
"font-size: 117%"
). CSS should be used to capture generalities about the presentation of the text (i.e.,
the title of Rivers and Other Watersis set in different font-sizes). It is not able to capture the exact sizes of font.
¶Dropcaps
Dropcaps come in various sizes and styles. The
"dropCap"
rendition provides a basis for rendering dropcaps:
<tagsDecl>
<p><hi rendition="#stow_1598_antiquity_dropCap">A</hi>S</p>
</tagsDecl>
<p><hi rendition="#stow_1598_antiquity_dropCap">A</hi>S</p>
</tagsDecl>
You may need to alter the font-size of the rendition so the dropcap indents the correct
amount of lines in the
Diplomatic transcriptionview. For example, note how the first dropcap in
Honour of Citizensis defined in its
<tagsDecl>
:
<tagsDecl>
<rendition scheme="css" xml:id="stow_1598_honour_dropCap">float: left; font-size: 210%; line-height: 1.5; padding: 1.2em 1.5em; margin: 0.2em; vertical-align: middle; border: solid 1pt black; font-family: "Georgia";</rendition>
</tagsDecl>
<rendition scheme="css" xml:id="stow_1598_honour_dropCap">float: left; font-size: 210%; line-height: 1.5; padding: 1.2em 1.5em; margin: 0.2em; vertical-align: middle; border: solid 1pt black; font-family: "Georgia";</rendition>
</tagsDecl>
The font-size is
"210%"
. Now note how the first dropcap in Towers and Castlesis defined in its
<tagsDecl>
:
<tagsDecl>
<rendition scheme="css" xml:id="stow_1598_towers_dropCap">float: left; font-size: 170%; line-height: 1.5; padding: 1.2em 1.5em; margin: 0.2em; vertical-align: middle; border: solid 1pt black; font-family: "Georgia";</rendition>
</tagsDecl>
<rendition scheme="css" xml:id="stow_1598_towers_dropCap">float: left; font-size: 170%; line-height: 1.5; padding: 1.2em 1.5em; margin: 0.2em; vertical-align: middle; border: solid 1pt black; font-family: "Georgia";</rendition>
</tagsDecl>
The font-size is
"170%"
. The font-size is the only part of the "dropCap"
rendition that encoders should change in Survey of London. The line-height, padding, margin, vertical-align, border, and font-family should
remain the same, even if the dropcap appears differently in each chapter.In addition to adding the
"dropcap"
rendition, you will need to add a @style
attribute to the proceeding <p>
element. Note this rendition in the <tagsDecl>
of Survey of London:
<tagsDecl>
<rendition scheme="css" xml:id="stow_1598_law_para" selector="p">text-indent: 2em;</rendition>
</tagsDecl>
<rendition scheme="css" xml:id="stow_1598_law_para" selector="p">text-indent: 2em;</rendition>
</tagsDecl>
This rendition automatically indents all
<p>
elements. While this is useful for almost all of Survey of London, we do not want this rendition to create an indent before a dropcap because it creates
an extra space between the dropcap and the rest of the word. When encoding a dropcap,
therefore, make sure to add a @style
attribute to the proceeding <p>
element with a "text-indent: 0"
value to remove this extra space:
<p style="text-indent: 0;"><hi rendition="#stow_1598_honour_dropCap">T</hi>His Citie</p>
CSS works as a hierarchy. Site-wide CSS is used to style our website as a whole. This
site-wide CSS can be overridden by page-specific CSS (defined in the
<tagsDecl>
of specific pages). Page-specific CSS can be overridden by in-text CSS. In this case,
site-wide CSS styles the base of Survey of London (e.g., colour-scheme, layout of the toolbars, logos). Page-specific CSS styles the
parts of the text that are unique to Survey of London (e.g., page-width, font-type). In-text CSS styles unique cases within the text, and
overrides both the site-wide CSS and page-specific CSS.While we try to avoid the use of in-text CSS when we can, cases will come up on occasion.
See
Complex Casesfor an example of a chart that requires extensive in-text CSS.
¶Running Headers
To style a running header, use the
"runningheader"
rendition. For simplicity, all you need to do is add the @type
attribute and "header"
value to the <fw>
element housing the running title:
<fw type="header">Antiquitie of London.</fw>
¶Page Numbers
There are two renditions for page numbers:
"lpagenum"
(page numbers appearing on the left side of the page) and "rpagenum"
(page numbers appearing on the right side of the page). For simplicity, all you need
to do is add (1) a @type
attribute with a "pageNum"
value, and (2) a @place
attribute with either a "top-right"
value or "top-left"
value to the <fw>
element:
<fw type="header">Antiquitie of London.</fw>
<fw type="pageNum" place="top-right">3</fw>
<fw type="pageNum" place="top-right">3</fw>
¶Signature Numbers
To style a signature number, use the
"signature"
rendition. For simplicity, all you need to do is add the @type
attribute and "signature"
value to the <fw>
element housing the signature number:
<fw type="signature">B2</fw>
¶Catchwords
To style a catchword, use the
"catchword"
rendition. For simplicity, all you need to do is add the @type
attribute and "catchword"
value to the <fw>
element housing the catchword:
<fw type="signature">B2</fw>
<fw type="catchword">doe</fw>
<fw type="catchword">doe</fw>
¶Marginal Labels
The renditions
"lmlabel"
and "rmlabel"
are used to style the marginal labels that appear in Survey of London. For simplicity, all you need to do is add the @place
attribute and "margin-left"
value or "margin-right"
value to the <label>
element:
<label place="margin-left">Tower of Lō<lb type="hyphenInWord"/>don builded<lb/> by William <lb/>Conqueror,<lb/> namely the<lb/> white Tower.</label>
¶Indentation
Unlike what we do for our library texts (see
Encode a Library Text), we manually style indentation in Survey of London. For example, see how this poem from
Sports and Pastimesis styled:
<lg style="margin-left: 4rem;">
<l>Mighty Flora, Goddeſſe of freſh flowers,</l>
<l style="text-indent: 1em;">which clothed hath the ſoile in luſtie greene.</l>
<l>Made buds ſpring, with her ſweete ſhowers,</l>
<l style="text-indent: 1em;">by influence of the Sun ſhine.</l>
<l>To doe pleaſance of intent full cleane,</l>
<l style="text-indent: 1em;">vnto the States which now ſit here.</l>
<l>Hath Vere downe ſent her owne daughter deare.</l>
</lg>
<l>Mighty Flora, Goddeſſe of freſh flowers,</l>
<l style="text-indent: 1em;">which clothed hath the ſoile in luſtie greene.</l>
<l>Made buds ſpring, with her ſweete ſhowers,</l>
<l style="text-indent: 1em;">by influence of the Sun ſhine.</l>
<l>To doe pleaſance of intent full cleane,</l>
<l style="text-indent: 1em;">vnto the States which now ſit here.</l>
<l>Hath Vere downe ſent her owne daughter deare.</l>
</lg>
The
"margin-left: 4rem;"
value on the @style
attribute of the <lg>
element indents the whole poem. The "text-indent: 1em;"
value on the <l>
elements’ @style
attributes indent particular lines.¶Changes in Typeface
1598 Survey of London is mostly set in Blackletter Gothic, with Roman type being used for emphasis. The
1633 Survey of London is mostly set in Roman, with italicized Roman type being used for emphasis.
Use the
"_R"
rendition in 1598 Survey of London to style Roman type:
<p>Firſt, that in the raigne of king <hi rendition="#stow_1598_temporal_government_R">Edward</hi> the laſt before the con<lb type="hyphenInWord"/>queſt, <hi rendition="#stow_1598_temporal_government_R">Wolfegare</hi> was <hi rendition="#stow_1598_temporal_government_R">Portgraue</hi>: as may appeare by the char<lb type="hyphenInWord"/>ter of the ſame king, in theſe words. <hi rendition="#stow_1598_temporal_government_R">Edward king greeteth Alf<lb type="hyphenInWord"/>ward B. and Wolfe graue my Portgraue, and all the Burgeſſes<lb/> in London</hi>. And afterward that in an other, king <hi rendition="#stow_1598_temporal_government_R">Edward</hi> grée<lb type="hyphenInWord"/>teth <hi rendition="#stow_1598_temporal_government_R">William</hi> Biſhop and <hi rendition="#stow_1598_temporal_government_R">Leofſtane</hi>, and <hi rendition="#stow_1598_temporal_government_R">Alffi</hi> Portgraues.</p>
Use the
"_IR"
rendition in 1633 Survey of London to style italicized Roman type:
<p><hi rendition="#stow_1633_QUEE3_IR">Iohn Brian</hi>, Alderman in the reigne of <lb/><hi rendition="#stow_1633_QUEE3_IR">Henry</hi> the fifth, was a great benefactor: <lb/><hi rendition="#stow_1633_QUEE3_IR">Iohn Chamber</hi> had a Chauntry there. <lb/><hi rendition="#stow_1633_QUEE3_IR">Thomas Riſhby</hi>, Eſquire, and <hi rendition="#stow_1633_QUEE3_IR">Alice</hi> his <lb/>wife buried within the Chancell. <hi rendition="#stow_1633_QUEE3_IR">Iohn <lb/>Mirfin</hi>, Auditor of the Exchequer, <lb/>1471. Sir <hi rendition="#stow_1633_QUEE3_IR">Richard Fowlar</hi> of <hi rendition="#stow_1633_QUEE3_IR">Rickes</hi> in <lb/><hi rendition="#stow_1633_QUEE3_IR">Oxfordſhire, 1528</hi>. <hi rendition="#stow_1633_QUEE3_IR">George Cope</hi>, ſe<lb type="hyphenInWord"/>cond ſonne to Sir <hi rendition="#stow_1633_QUEE3_IR">Iohn Cope</hi> of <hi rendition="#stow_1633_QUEE3_IR">Copeſ</hi></p>
Note that you can use the
"_IR"
rendition to style italicized Roman type in the 1598 Survey of London—it is just much more uncommon.¶Complex Cases
Occasionally, something will appear in Survey of London that does not lend itself well to encoding. A perfect example is this chart in
Students of Common Law:
For cases like this, a senior encoder will need to add the CSS. Flag complex cases
and bring them to the MoEML team.
Cite this page
MLA citation
Encode Style.The Map of Early Modern London, Edition 6.6, edited by , U of Victoria, 30 Jun. 2021, mapoflondon.uvic.ca/edition/6.6/encode_style.htm.
Chicago citation
Encode Style.The Map of Early Modern London, Edition 6.6. Ed. . Victoria: University of Victoria. Accessed June 30, 2021. mapoflondon.uvic.ca/edition/6.6/encode_style.htm.
APA citation
The Map of Early Modern London (Edition 6.6). Victoria: University of Victoria. Retrieved from https://mapoflondon.uvic.ca/editions/6.6/encode_style.htm.
, , , & 2021. Encode Style. In (Ed), RIS file (for RefMan, RefWorks, EndNote etc.)
Provider: University of Victoria Database: The Map of Early Modern London Content: text/plain; charset="utf-8" TY - ELEC A1 - LeBere, Kate A1 - Landels-Gruenewald, Tye A1 - Holmes, Martin A1 - Butt, Cameron ED - Jenstad, Janelle T1 - Encode Style T2 - The Map of Early Modern London ET - 6.6 PY - 2021 DA - 2021/06/30 CY - Victoria PB - University of Victoria LA - English UR - https://mapoflondon.uvic.ca/edition/6.6/encode_style.htm UR - https://mapoflondon.uvic.ca/edition/6.6/xml/standalone/encode_style.xml ER -
TEI citation
<bibl type="mla"><author><name ref="#LEBE1"><surname>LeBere</surname>, <forename>Kate</forename></name></author>,
<author><name ref="#LAND2"><forename>Tye</forename> <surname>Landels-Gruenewald</surname></name></author>,
<author><name ref="#HOLM3"><forename>Martin</forename> <forename>D.</forename> <surname>Holmes</surname></name></author>,
and <author><name ref="#BUTT1"><forename>Cameron</forename> <surname>Butt</surname></name></author>.
<title level="a">Encode Style</title>. <title level="m">The Map of Early Modern London</title>,
Edition <edition>6.6</edition>, edited by <editor><name ref="#JENS1"><forename>Janelle</forename>
<surname>Jenstad</surname></name></editor>, <publisher>U of Victoria</publisher>,
<date when="2021-06-30">30 Jun. 2021</date>, <ref target="https://mapoflondon.uvic.ca/edition/6.6/encode_style.htm">mapoflondon.uvic.ca/edition/6.6/encode_style.htm</ref>.</bibl>
Personography
-
Jamie Zabel
JZ
Research Assistant, 2020-2021. Managing Encoder, 2020-2021. Jamie Zabel is an MA student at the University of Victoria in the Department of English. She completed her BA in English at the University of British Columbia in 2017. She published a paper in University College London’s graduate publication Moveable Type (2020) and presented at the University of Victoria’s 2021 Digital Humanities Summer Institute. During her time at MoEML, she made significant contributions to the 1598 and 1633 editions of Stow’s Survey as proofreader, editor, and encoder, coordinated the encoding of the 1633 edition, and researched and authored a number of encyclopedia articles and geo-coordinates to supplement both editions. She also played a key role in managing the correction process of MoEML’s Gazetteer.Roles played in the project
-
Abstract Author
-
Author
-
CSS Editor
-
Copy Editor
-
Data Manager
-
Editor
-
Encoder
-
Geo-Coordinate Researcher
-
Markup Editor
-
Proofreader
-
Researcher
-
Transcription Proofreader
Contributions by this author
Jamie Zabel is a member of the following organizations and/or groups:
Jamie Zabel is mentioned in the following documents:
-
-
Kate LeBere
KL
Project Manager, 2020-2021. Assistant Project Manager, 2019-2020. Research Assistant, 2018-2020. Kate LeBere completed her BA (Hons.) in History and English at the University of Victoria in 2020. She published papers in The Corvette (2018), The Albatross (2019), and PLVS VLTRA (2020) and presented at the English Undergraduate Conference (2019), Qualicum History Conference (2020), and the Digital Humanities Summer Institute’s Project Management in the Humanities Conference (2021). While her primary research focus was sixteenth and seventeenth century England, she completed her honours thesis on Soviet ballet during the Russian Cultural Revolution. During her time at MoEML, Kate made significant contributions to the 1598 and 1633 editions of Stow’s Survey of London, old-spelling anthology of mayoral shows, old-spelling library texts,quickstart
documentation for new research assistants, and worked to standardize both the Personography and Bibliography. She is currently a student at the University of British Columbia’s iSchool, working on her masters in library and information science.Roles played in the project
-
Abstract Author
-
Author
-
CSS Editor
-
Compiler
-
Conceptor
-
Copy Editor
-
Data Manager
-
Editor
-
Encoder
-
Geo-Coordinate Researcher
-
Markup Editor
-
Proofreader
-
Researcher
-
Toponymist
-
Transcriber
-
Transcription Proofreader
Contributions by this author
Kate LeBere is a member of the following organizations and/or groups:
Kate LeBere is mentioned in the following documents:
-
-
Tye Landels-Gruenewald
TLG
Data Manager, 2015-2016. Research Assistant, 2013-2015. Tye completed his undergraduate honours degree in English at the University of Victoria in 2015.Roles played in the project
-
Author
-
CSS Editor
-
Compiler
-
Conceptor
-
Copy Editor
-
Data Manager
-
Editor
-
Encoder
-
Geo-Coordinate Researcher
-
Markup Editor
-
Metadata Architect
-
Proofreader
-
Researcher
-
Toponymist
-
Transcriber
-
Transcription Proofreader
Contributions by this author
Tye Landels-Gruenewald is a member of the following organizations and/or groups:
Tye Landels-Gruenewald is mentioned in the following documents:
-
-
Cameron Butt
CB
Research Assistant, 2012–2013. Cameron Butt completed his undergraduate honours degree in English at the University of Victoria in 2013. He minored in French and has a keen interest in Shakespeare, film, media studies, popular culture, and the geohumanities.Roles played in the project
-
Author
-
CSS Editor
-
Conceptor
-
Copy Editor
-
Data Manager
-
Encoder
-
Markup Editor
-
Metadata Architect
-
Proofreader
-
Researcher
-
Transcriber
-
Transcription Proofreader
Contributions by this author
Cameron Butt is a member of the following organizations and/or groups:
Cameron Butt is mentioned in the following documents:
-
-
Janelle Jenstad
JJ
Janelle Jenstad is Associate Professor of English at the University of Victoria, Director of The Map of Early Modern London, and PI of Linked Early Modern Drama Online. She has taught at Queen’s University, the Summer Academy at the Stratford Festival, the University of Windsor, and the University of Victoria. With Jennifer Roberts-Smith and Mark Kaethler, she co-edited Shakespeare’s Language in Digital Media (Routledge). She has prepared a documentary edition of John Stow’s A Survey of London (1598 text) for MoEML and is currently editing The Merchant of Venice (with Stephen Wittek) and Heywood’s 2 If You Know Not Me You Know Nobody for DRE. Her articles have appeared in Digital Humanities Quarterly, Renaissance and Reformation,Journal of Medieval and Early Modern Studies, Early Modern Literary Studies, Elizabethan Theatre, Shakespeare Bulletin: A Journal of Performance Criticism, and The Silver Society Journal. Her book chapters have appeared (or will appear) in Institutional Culture in Early Modern Society (Brill, 2004), Shakespeare, Language and the Stage, The Fifth Wall: Approaches to Shakespeare from Criticism, Performance and Theatre Studies (Arden/Thomson Learning, 2005), Approaches to Teaching Othello (Modern Language Association, 2005), Performing Maternity in Early Modern England (Ashgate, 2007), New Directions in the Geohumanities: Art, Text, and History at the Edge of Place (Routledge, 2011), Early Modern Studies and the Digital Turn (Iter, 2016), Teaching Early Modern English Literature from the Archives (MLA, 2015), Placing Names: Enriching and Integrating Gazetteers (Indiana, 2016), Making Things and Drawing Boundaries (Minnesota, 2017), and Rethinking Shakespeare’s Source Study: Audiences, Authors, and Digital Technologies (Routledge, 2018).Roles played in the project
-
Abstract Author
-
Author
-
Compiler
-
Conceptor
-
Copy Editor
-
Course Instructor
-
Course Supervisor
-
Data Manager
-
Editor
-
Encoder
-
Geo-Coordinate Researcher
-
JCURA Co-Supervisor
-
Markup Editor
-
Metadata Architect
-
Peer Reviewer
-
Project Director
-
Proofreader
-
Researcher
-
Toponymist
-
Transcriber
-
Transcription Proofreader
-
Vetter
Contributions by this author
Janelle Jenstad is a member of the following organizations and/or groups:
Janelle Jenstad is mentioned in the following documents:
Janelle Jenstad authored or edited the following items in MoEML’s bibliography:
-
Jenstad, Janelle and Joseph Takeda.
Making the RA Matter: Pedagogy, Interface, and Practices.
Making Things and Drawing Boundaries: Experiments in the Digital Humanities. Ed. Jentery Sayers. Minnesota: University of Minnesota Press, 2018. Print. -
Jenstad, Janelle.
Building a Gazetteer for Early Modern London, 1550-1650.
Placing Names. Ed. Merrick Lex Berman, Ruth Mostern, and Humphrey Southall. Bloomington and Indianapolis: Indiana UP, 2016. 129-145. -
Jenstad, Janelle.
The Burse and the Merchant’s Purse: Coin, Credit, and the Nation in Heywood’s 2 If You Know Not Me You Know Nobody.
The Elizabethan Theatre XV. Ed. C.E. McGee and A.L. Magnusson. Toronto: P.D. Meany, 2002. 181–202. Print. -
Jenstad, Janelle.
Early Modern Literary Studies 8.2 (2002): 5.1–26..The City Cannot Hold You
: Social Conversion in the Goldsmith’s Shop. -
Jenstad, Janelle.
The Silver Society Journal 10 (1998): 40–43.The Gouldesmythes Storehowse
: Early Evidence for Specialisation. -
Jenstad, Janelle.
Lying-in Like a Countess: The Lisle Letters, the Cecil Family, and A Chaste Maid in Cheapside.
Journal of Medieval and Early Modern Studies 34 (2004): 373–403. doi:10.1215/10829636–34–2–373. -
Jenstad, Janelle.
Public Glory, Private Gilt: The Goldsmiths’ Company and the Spectacle of Punishment.
Institutional Culture in Early Modern Society. Ed. Anne Goldgar and Robert Frost. Leiden: Brill, 2004. 191–217. Print. -
Jenstad, Janelle.
Smock Secrets: Birth and Women’s Mysteries on the Early Modern Stage.
Performing Maternity in Early Modern England. Ed. Katherine Moncrief and Kathryn McPherson. Aldershot: Ashgate, 2007. 87–99. Print. -
Jenstad, Janelle.
Using Early Modern Maps in Literary Studies: Views and Caveats from London.
GeoHumanities: Art, History, Text at the Edge of Place. Ed. Michael Dear, James Ketchum, Sarah Luria, and Doug Richardson. London: Routledge, 2011. Print. -
Jenstad, Janelle.
Versioning John Stow’s A Survey of London, or, What’s New in 1618 and 1633?.
Janelle Jenstad Blog. https://janellejenstad.com/2013/03/20/versioning-john-stows-a-survey-of-london-or-whats-new-in-1618-and-1633/. -
Shakespeare, William. The Merchant of Venice. Ed. Janelle Jenstad. Internet Shakespeare Editions. U of Victoria. http://internetshakespeare.uvic.ca/Library/Texts/MV/.
-
Stow, John. A SVRVAY OF LONDON. Contayning the Originall, Antiquity, Increase, Moderne estate, and description of that Citie, written in the yeare 1598. by Iohn Stow Citizen of London. Also an Apologie (or defence) against the opinion of some men, concerning that Citie, the greatnesse thereof. With an Appendix, containing in Latine, Libellum de situ & nobilitate Londini: written by William Fitzstephen, in the raigne of Henry the second. Ed. Janelle Jenstad and the MoEML Team. MoEML. Transcribed.
-
-
Martin D. Holmes
MDH
Programmer at the University of Victoria Humanities Computing and Media Centre (HCMC). Martin ported the MOL project from its original PHP incarnation to a pure eXist database implementation in the fall of 2011. Since then, he has been lead programmer on the project and has also been responsible for maintaining the project schemas. He was a co-applicant on MoEML’s 2012 SSHRC Insight Grant.Roles played in the project
-
Abstract Author
-
Author
-
Conceptor
-
Editor
-
Encoder
-
Geo-Coordinate Researcher
-
Markup Editor
-
Post-Conversion Editor
-
Programmer
-
Proofreader
-
Researcher
Contributions by this author
Martin D. Holmes is a member of the following organizations and/or groups:
Martin D. Holmes is mentioned in the following documents:
-
-
Sir Henry fitz-Alwine
Sir Henry fitz-Alwine Mayor
(d. 1212)First mayor of London 1189–1212. Possible member of the Drapers’ Company. Buried at Holy Trinity Priory.Sir Henry fitz-Alwine is mentioned in the following documents:
Organizations
-
The MoEML Team
These are all MoEML team members since 1999 to present. To see the current members and structure of our team, seeTeam.
-
Former Student Contributors
We’d also like to acknowledge students who contributed to MoEML’s intranet predecessor at the University of Windsor between 1999 and 2003. When we redeveloped MoEML for the Internet in 2006, we were not able to include all of the student projects that had been written for courses in Shakespeare, Renaissance Drama, and/or Writing Hypertext. Nonetheless, these students contributed materially to the conceptual development of the project.
Roles played in the project
-
Author
-
Data Manager
-
Researcher
Contributions by this author
This organization is mentioned in the following documents: