Encode Inline Style Using CSS and CSS Flex in Semi-Diplomatic Transcriptions

This documentation will teach you about LEMDO’s practice for using advanced styling options. It is designed primarily for people who have previous experience using CSS.

Rationale

Some playbooks deviate from the basic mise-en-page described by LEMDO’s default semi-diplomatic styling in consistent ways, in which case you can use renditions in the <teiHeader> of each individual file. Inline deviations from the anthology-level CSS or file-level renditions can be described using inline style. If your playbook sporadically deviates from the features described in our default stylesheet in a way that cannot be captured by our pre-fabricated renditions, you will use CSS or, in some cases, CSS Flex to describe specific styling.

Principles

Only use the CSS options outlined in this documentation if:
Some aspect of your playbook deviates from LEMDO’s default styling, your anthology’s default styling, and any renditions in the <teiHeader> of your XML file.
You cannot adequately capture the deviations using the options outlined in Encode Inline Style Using Pre-Formed Values in Semi-Diplomatic Transcriptions.
If you think that your file requires CSS but you do not have the knowledge necessary to use it, please contact a LEMDO team member.

Special Case: No Preformed Rendition

If LEMDO does not have a preformed rendition that describes the deviations in your text, you may choose to either:
Add a <rendition> element to the <tagsDecl> of your file and put an @xml:id attribute on it rather than a @selector attribute. Point to the rendition where you want to apply the style by putting the @style attribute on either a container element or the <hi> element and giving it the value of the xml:id defined in your <tagsDecl> preceded by a hash character. For more on adding a <tagsDecl> to your file, see Practice: Encode File-Wide Style.
Add a @style attribute to a container element or the <hi> element and add the appropriate CSS as the value.
If you are uncertain which option is right for your edition, contact the LEMDO team.

Introduction to CSS

CSS is a core language for styling Web pages. It allows us to capture key bibliographic features of early modern playbooks. You may use explicit CSS as the value of the @style attribute in your semi-diplomatic transcription to capture style variants that are not captured by our SCSS, your file-wide styling from your <tagsDecl> , or any preformed @renditionvalues.
Note when writing CSS that it follows US American spelling (e.g., "color", not colour).

CSS Syntax

CSS follows regular syntax. We have written Schematron to require good stynax in CSS, but it is important to also have knowledge about the standard syntax of CSS. For background on the key terms of CSS syntax, see Terms for Working on Style.
Your inline CSS will be formed as @style="property: value;". You must always include a colon after the property and a semi-colon after the value. For information on what properties and values you may use in your CSS, see mdn, CSS Reference and W3Schools, CSS Reference.

Introduction to CSS Flex

CSS Flex allows us to truthfully encode and accurately render features that cannot be captured by the layouts allowed by typical CSS.
CSS typically uses either block formatting, which renders an element on the line below the previous element, or inline formatting, which renders an element on the same line as the previous element. CSS Flex allows for elements that do not fit either the block or inline format and are not tables. For example, although we could potentially encode long braces using a table with styling, that method would not be a truthful depiction of the page layout in early modern playbooks.
We primarily use CSS Flex for inline long braces. There may be other features that are best captured by CSS Flex. If you come across a different use case for CSS Flex in your edition, let the LEMDO team know by emailing a LEMDO team member.

Practice: Encode Long Braces with CSS Flex

The first step to encode long braces is to break down the relevant compositorial units on the page that you are encoding. You have to think like an early modern compositor. What are the basic blocks on the page that you need to be able to style in some way? Each thing that needs to be styled (stretched, centered, italicized, grouped) needs to be contained in its own element.
If you are encoding a list wrapped in a pair of long braces, your components might be:
List heading ( <label> )
Brace ( <metamark> )
List ( <list> )
Item(s) ( <item> )
Brace ( <metamark> )
Each of these components will be represented as an element in TEI. If there is no obvious element to act as a container for the component, you may use the <hi> or <seg> element.
Next, group all of the components that you have identified by wrapping them in a <seg> element. Put a @style attribute on the <seg> . There are three properties included in the value of @style:
"display": Give the "display" property a value of "flex;". This is what make the element a CSS Flex element rather than a block or inline element.
"flex-direction": You may give the "flex-direction" property a value of either "row;" or "column;" depending on how you want to lay out the components. If you choose row as your flex direction, content will be centered in vertical space. If you choose column as your flex direction, content will be centered in horizontal space. In almost all cases, we want to use row.
"align-items": There are a number of values that you may put on the "align-items" property. In most cases, we use "center;" (for braces spanning multiple lines) or "flex-end;" (for braces spanning a single line).
Format these as you do for typical CSS (i.e., put a semicolon after each component and separate components with a space).
You should now have something that looks either like this:
<seg style="display: flex; flex-direction: row; align-items: center;">
  <label>Label</label>
  <metamark>{</metamark>
  <list rend="simple">
    <item>Item 1</item>
    <item>Item 2</item>
  </list>
  <metamark>}</metamark>
</seg>
or like this:
<seg style="display: flex; flex-direction: column; align-items: center;">
  <metamark>{</metamark>
  <list rend="simple">
    <item>Item 1</item>
    <item>Item 2</item>
  </list>
  <metamark>}</metamark>
</seg>
To stretch your braces, add a @style attribute to the <metamark> element. There are three properties for @style on the <metamark> element:
"transform": Defines the axis that you wish to stretch. For long braces, you will stretch the vertical or Y axis. To do this, give the "transform" property a value of "scaleY" followed by a number equivalent to the number of sizes larger that you want the element to stretch wrapped in parentheses (for example, to stretch a brace to three times its normal height, the "transform" component would be encoded as: "transform: scaleY (3);").
"transform-origin": Defines where the stretch starts. Give this a value of "left-top;".
"margin": Contains four numerical values separated with spaces. The first value corresponds to the top, the second to the right, the third to the bottom, and the fourth to the left. You will need to tweak these values until your braces look correct. Note that after values other than zero, you will need to specify rem as the unit after the number. If the value is 0, you do not need to specify the unit.
This is an example of a brace encoded to be three times its original height and transformed to have a margin of -2.4 rems from the top and 0.2 rems from the left:
<item style="display: flex; flex-direction: column; align-items: center;">
  <metamark style="transform: scaleY (3); transform-origin: left-top; margin: -2.4rem 0 0 0.2rem;">{</metamark>
  <list rend="bulleted">
    <item>Item.</item>
  </list> } </item>

Practice: Tweak CSS Values

There are three ways to check and tweak your CSS. The first is to commit your file to the LEMDO repository, wait for it to build on the website, and use inspector view to change the CSS. The second is to use a computer that has Ant installed and create a local build. The third is to use a coding site such as CodePen. The first option works well as long as there is at least one successful build of your page on the Jenkins site. The second option works even if there is not yet a successful build. The third option requires at least one successful build of your page on the Jenkins site, but shows immediate results from tweaks to CSS and has a clearly laid out code editor.
To tweak your CSS in inspector, follow these steps:
Commit your file to the repository and wait for it to build. This will take a few hours.
Once there is one successful build with your styling in place, open your file’s page in the LEMDO-dev Jenkins site.
Right click the item that you are styling (e.g., if you are using CSS Flex to create a long brace, right click the long brace). Select inspect from the dropdown menu.
Try using different values in the style pane of your browser’s inspector.
Once you have determined the correct values that you want to use, enter them into your file in Oxygen.
To check and tweak your CSS using a local build, follow these steps:
Save your file locally.
In your terminal, change directory into your lemdo directory.
Once you are in the correct directory, copy and paste ./getSiteFromJenkins.sh into your command line, then click Enter. This command will download the most recent successful Jenkins site. Alternatively, you can type the command ls into your command line and select ./getSiteFromJenkins.sh.
Once you have downloaded the static site, copy and paste the following command into your command line: ant quick -DdocsToBuild=filename (with the name of your file rather than filename).
You can then tweak your CSS and build your page until your styling appears correct.
Note that not all JavaScript will work correctly when you download the static site, but the layout and styling will appear. You will not need the JavaScript for tweaking your CSS.
To tweak your code with CodePen, go to the Pen feature of the CodePen website, then follow these steps:
Open your page on the Jenkins site.
Right click the item that you are styling (e.g., if you are using CSS Flex to create a long brace, right click the long brace). Select inspect from the dropdown menu.
Right click the HTML line (or lines) for the item that you are styling and select Copy and then Outer HTML.
Paste the outer HTML into the HTML box.
You can then tweak your @style values directly in the HTML box and see immediate results below.

Further Examples

This example shows how to apply CSS Flex to a stretched brace used to group characters that share a role description in a manuscript cast list. The parent element containing all the boxes is the first <castGroup> element. The first box is the child <castGroup> element. The second box is the <metamark> element containing the brace (French: accolade), which has styling to stretch the brace. The third box is the <roleDesc> :
<castGroup style="display: flex; flex-direction: row; align-items: center;">
  <castGroup>
    <castItem xml:id="emdDouai_Mac_macbeth">
      <role>Macbeth<space dim="horizontal" unit="em" quantity="0.5"/>
      </role>
    </castItem>
    <lb/>
    <castItem xml:id="emdDouai_Mac_banquo">
      <role>Banquo<space dim="horizontal" unit="em" quantity="0.5"/>
      </role>
    </castItem>
  </castGroup>
  <metamark style="transform: scaleY(3); transform-origin: center; margin: 0 1em;">}</metamark>
  <roleDesc>generalls of his armies.</roleDesc>
</castGroup>

Resources

The following resources have helpful information and tools for learning and practicing CSS Flex:
The Mozilla Developer Network’s Flexbox.

Prosopography

Isabella Seales

Isabella Seales is a fourth year undergraduate completing her Bachelor of Arts in English at the University of Victoria. She has a special interest in Renaissance and Metaphysical Literature. She is assisting Dr. Jenstad with the MoEML Mayoral Shows anthology as part of the Undergraduate Student Research Award program.

Janelle Jenstad

Janelle Jenstad is a Professor of English at the University of Victoria, Director of The Map of Early Modern London, and Director of Linked Early Modern Drama Online. With Jennifer Roberts-Smith and Mark Kaethler, she co-edited Shakespeare’s Language in Digital Media: Old Words, New Tools (Routledge). She has edited 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, Elizabethan Theatre, Early Modern Literary Studies, Shakespeare Bulletin, Renaissance and Reformation, and The Journal of Medieval and Early Modern Studies. She contributed chapters to Approaches to Teaching Othello (MLA); Teaching Early Modern Literature from the Archives (MLA); Institutional Culture in Early Modern England (Brill); Shakespeare, Language, and the Stage (Arden); Performing Maternity in Early Modern England (Ashgate); New Directions in the Geohumanities (Routledge); Early Modern Studies and the Digital Turn (Iter); Placing Names: Enriching and Integrating Gazetteers (Indiana); Making Things and Drawing Boundaries (Minnesota); Rethinking Shakespeare Source Study: Audiences, Authors, and Digital Technologies (Routledge); and Civic Performance: Pageantry and Entertainments in Early Modern London (Routledge). For more details, see janellejenstad.com.

Joey Takeda

Joey Takeda is LEMDO’s Consulting Programmer and Designer, a role he assumed in 2020 after three years as the Lead Developer on LEMDO.

Mahayla Galliford

Project manager, 2025-present; research assistant, 2021-present. Mahayla Galliford (she/her) graduated with a BA (Hons with distinction) from the University of Victoria in 2024. Mahayla’s undergraduate research explored early modern stage directions and civic water pageantry. Mahayla continues her studies through UVic’s English MA program and her SSHRC-funded thesis project focuses on editing and encoding girls’ manuscripts, specifically Lady Rachel Fane’s dramatic entertainments, in collaboration with LEMDO.

Martin Holmes

Martin Holmes has worked as a developer in the UVic’s Humanities Computing and Media Centre for over two decades, and has been involved with dozens of Digital Humanities projects. He has served on the TEI Technical Council and as Managing Editor of the Journal of the TEI. He took over from Joey Takeda as lead developer on LEMDO in 2020. He is a collaborator on the SSHRC Partnership Grant led by Janelle Jenstad.

Navarra Houldin

Training and Documentation Lead 2025–present. LEMDO project manager 2022–2025. Textual remediator 2021–present. Navarra Houldin (they/them) completed their BA with a major in history and minor in Spanish at the University of Victoria in 2022. Their primary research was on gender and sexuality in early modern Europe and Latin America. They are continuing their education through an MA program in Gender and Social Justice Studies at the University of Alberta where they will specialize in Digital Humanities.

Sofia Spiteri

Sofia Spiteri is currently completing her Bachelor of Arts in History at the University of Victoria. During the summer of 2023, she had the opportunity to work with LEMDO as a recipient of the Valerie Kuehne Undergraduate Research Award (VKURA). Her work with LEMDO primarily includes semi-diplomatic transcriptions for The Winter’s Tale and Mucedorus.

Tracey El Hajj

Junior Programmer 2019–2020. Research Associate 2020–2021. Tracey received her PhD from the Department of English at the University of Victoria in the field of Science and Technology Studies. Her research focuses on the algorhythmics of networked communications. She was a 2019–2020 President’s Fellow in Research-Enriched Teaching at UVic, where she taught an advanced course on Artificial Intelligence and Everyday Life. Tracey was also a member of the Map of Early Modern London team, between 2018 and 2021. Between 2020 and 2021, she was a fellow in residence at the Praxis Studio for Comparative Media Studies, where she investigated the relationships between artificial intelligence, creativity, health, and justice. As of July 2021, Tracey has moved into the alt-ac world for a term position, while also teaching in the English Department at the University of Victoria.

Orgography

LEMDO Team (LEMD1)

The LEMDO Team is based at the University of Victoria and normally comprises the project director, the lead developer, project manager, junior developers(s), remediators, encoders, and remediating editors.

Metadata

Authority title Encode Inline Style Using CSS and CSS Flex in Semi-Diplomatic Transcriptions
Type of text Documentation
Publisher University of Victoria on the Linked Early Modern Drama Online Platform
Series Linked Early Modern Drama Online
Source
TEI Customization created by Martin Holmes, Joey Takeda, and Janelle Jenstad; documentation written by members of the LEMDO Team
Editorial declaration n/a
Edition Released with Linked Early Modern Drama Online 1.0
Encoding description Encoded in TEI P5 according to the LEMDO Customization and Encoding Guidelines
Document status prgGenerated
Funder(s) Social Sciences and Humanities Research Council of Canada
License/availability
This file is licensed under a CC BY-NC_ND 4.0 license, which means that it is freely downloadable without permission under the following conditions: (1) credit must be given to the author and LEMDO in any subsequent use of the files and/or data; (2) the content cannot be adapted or repurposed (except in quotations for the purposes of academic review and citation); and (3) commercial uses are not permitted without the knowledge and consent of the editor and LEMDO. This license allows for pedagogical use of the documentation in the classroom.