Encode Cast Lists Contained by Tables in Semi-Diplomatic Transcriptions

This documentation is intended for experienced encoders. It presupposes that you are comfortable using CSS and CSS Flex, and that you are familiar with LEMDO’s practice for encoding cast lists in semi-diplomatic transcriptions. If you do not yet feel confident in these skills, read through each hyperlink in the prior reading section of this documentation.

Prior Reading

For encoding standard tables, see Create Tables in Critical Paratexts.
For cast lists that appear on title pages, see Special Case: Cast List on Title Page

Rationale

In some early print publications, cast lists appear inside of a table. These tables vary in size, shape, and form, making it difficult to capture them with standard CSS. Instead, we use CSS Flex to truthfully encode and accurately render cast list tables.
We encode cast lists differently depending on where they are located in the playbook. Most cast list tables appear on the play’s title page, but others can appear on their own page or at the end of the play text. This documentation will demonstrate how to encode the cast list table itself. If your cast list table is located on the title page, please see Special Case: Cast List on Title Page to nest the table within the title page. If your table is located anywhere else, please see Encode Character Lists, Actor Lists, and Cast Lists in Semi-Diplomatic Transcriptions to encode a typical cast list.

Practice: Encode the Table

We encode tables according to the following pattern:
<table>
  <row>
    <cell/>
  </row>
</table>
To encode a cast list table, you will apply CSS and CSS Flex to this pattern. Style the elements in the hierarchical order they appear: first <table> , then <row> , and finally <cell> . Include as many <row> and <cell> elements as you need to accurately capture all the rows and columns of your table’s mise-en-page. To learn more about the basic encoding for a table, see Create Tables in Critical Paratexts.
Begin by adding CSS values to the <table> element. Using the @style attribute, place two CSS values on <table> : "display: block;" and "width: 100%;". These two values ensure that the table appears on its own line, and that it fills the available width of the page. Your completed <table> element should look like this:
<table style="display: block; width: 100%;"/>
After encoding <table> , apply the following CSS styling to each <row> element:
"display: flex;" to define <row> as a flex container. This value establishes a specialized environment for its direct children (in this case, <cell> ), which can be aligned, spaced, and resized as needed.
"flex-direction: row;" to align your flex content horizontally.
(Optional) "min-height:" with a numerical value to set the minimum vertical space that each cell must take up. You may wish to use this if you have an empty row that needs to be a certain size.
Then, apply the following CSS styling to each <cell> element:
"display: flex;" to define <cell> as a flex item. This means that each cell can move around independently within the <row> element.
"flex-direction: row;" to align your flex content horizontally.
"align-items: center;" to align your flex content in the middle of the cell.
"flex: 1;" to allow your flex items to grow and shrink to fill available space as needed.
(Optional) "padding:" with up to four numerical values to add space inside the cell between its border and its content. You may wish to add padding if you need to indent your text or create space away from the edges of the cell.
When you finish styling the table, your encoding for one row should look like this (if it includes the optional padding):
<table style="display: block; width: 100%;">
  <row style="display: flex; flex-direction: row; min-height: 6em;">
    <cell style="display: flex; flex-direction: row; align-items: center; flex: 1; padding: 0.4em 0.3em 0.4em 0.6em;"/>
  </row>
</table>

Practice: Style <castList> , <castGroup> , and <castItem>

Now that you have encoded your table, you can use it as a guide to style your cast list.
Place a <castList> element inside each <cell> . <castList> contains three children in the following order:
A <castGroup> element with a child <castItem> . Encode one <castItem> for each role and wrap the character’s name in the <role> element.
A <metamark> element with the } bracket (character) in the text node. If your cast list contains a vertical line instead, you can use the | (pipe) character.
A second <castGroup> with a child <roleDesc> . In the text node of <roleDesc> , include any casting notes (such as “For one man”).
Before adding any styling, your cast list for one cell should look like this:
<cell>
  <castList>
    <castGroup>
      <castItem>
        <role>Ambidexter</role>
      </castItem>
      <castItem>
        <role>Triall.</role>
      </castItem>
    </castGroup>
    <metamark>}</metamark>
    <castGroup>
      <roleDesc>For one man.</roleDesc>
    </castGroup>
  </castList>
</cell>
Generally, the styling for <castList> , <castGroup> , and <castItem> is consistent across plays. Apply the following styling to your cast list, ignoring (for now) the <metamark> and second <castGroup> elements:
<castList style="display: flex; flex-direction: row; align-items: center; flex: 1; min-width: 0;">
  <castGroup style="display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; min-width: 0;">
    <castItem style="display: block;">
      <role style="display: block; white-space: nowrap; line-height: 1.55em;">Ambidexter</role>
    </castItem>
    <castItem style="display: block;">
      <role style="display: block; white-space: nowrap; line-height: 1.55em;">Triall.</role>
    </castItem>
  </castGroup>
  <metamark>}</metamark>
  <castGroup>
    <roleDesc>For one man.</roleDesc>
  </castGroup>
</castList>
This styling defines the cast list itself as a flex row (items will be stacked horizontally), but the list of names as a flex column (items will be stacked vertically). It also ensures that names don’t wrap and that all content is evenly spaced. If your table requires more specific placements, you can add "padding" to the first <castGroup> element.

Practice: Style <metamark>

The curly bracket that groups a set of roles is encoded as a <metamark> element with the } character in the text node. To reproduce the stretched bracket used in many early print publications, we use the CSS value "transform" to scale the bracket along both the X and Y axes. Apply the following styling to your <metamark> element, keeping in mind the specific needs of your play’s cast list table:
"display: flex;"
"align-items: center;"
"transform: scaleX(0) scaleY(0);". The value 0 means that the bracket will be scaled 0 times its own size along the X and Y axes (so, not scaled at all). You want to change this number to something that better fits your particular cast list table. For example, "scaleX(3) scaleY(10)" would scale your bracket three times its width and ten times its height. You can always tweak your CSS using inspector view once your file builds on the website, so don’t worry about being exactly correct the first time.
"transform-origin: left center;" to anchor the scaling to the left edge so the bracket grows rightward without shifting its position.
"align-self: stretch;" to ensure the bracket spans the full height of its flex container, matching the height of the role list beside it.
"width: 2em; min-width: 2em;" to reserve space in the flex layout for the bracket before scaling is applied. You will likely not need to change these values.
(Optional) "margin:" with up to four numerical values to move your bracket left, right, up, or down. You may not recognize that you need this value until after your initial CSS builds on the website, so keep it in mind when tweaking your encoding.

Practice: Style <roleDesc>

The casting note is encoded in a <roleDesc> element. It must be wrapped in its own <castGroup> element, rather than placed directly inside the first <castGroup> , so that it can be independently styled with CSS Flex. Both <castGroup> and <roleDesc> require their own CSS styling.
Begin by applying the following styling to your second <castGroup> element:
"display: flex;"
"align-items: center;"
"align-self: stretch;"
"padding-left: 3.5em;". This value pushes the casting note away from the bracket so it doesn’t overlap. Although 3.5em is a standard value that works for most cast list tables, you may need to adjust it depending on the mise-en-page of your specific playbook.
These values ensure that the casting note is vertically centered along the right side of the bracket.
Next, apply the following styling to your <roleDesc> element:
"display: block;"
"white-space: nowrap;"
"align-self: center;"
These values ensure that the text of the casting note appears on its own line, doesn’t wrap, and aligns itself to the centre of the space.

Example: One Row

This is a complete example of a single <row> with two cells that has been fully encoded and correctly styled using CSS and CSS Flex. You will need to repeat this pattern for each row in your cast list table, using as many <cell> elements as you need to accurately capture the table in your playbook.
<row style="display: flex; flex-direction: row; min-height: 6em;">
  <cell style="display: flex; flex-direction: row; align-items: center; flex: 1; padding: 0.4em 0.3em 0.4em 0.6em;">
    <castList style="display: flex; flex-direction: row; align-items: center; flex: 1; min-width: 0;">
      <castGroup style="display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; min-width: 0; padding-right: 0.2em;">
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Knight,</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Snuf.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">small habilitic.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Proof.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Execution.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Attendance.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">second Lord.</role>
        </castItem>
      </castGroup>
      <metamark style="display: flex; align-items: center; align-self: stretch; white-space: nowrap; width: 2em; min-width: 2em; margin: 0 0.25em; transform: scaleX(3) scaleY(13); transform-origin: left center; margin-bottom: 1.3em;">}</metamark>
      <castGroup style="display: flex; align-items: center; align-self: stretch; padding-left: 2em;">
        <roleDesc style="display: block; white-space: nowrap; align-self: center;" rendition="rnd:italic">For one man.</roleDesc>
      </castGroup>
    </castList>
  </cell>
  <cell style="display: flex; flex-direction: row; align-items: center; flex: 1; padding: 0.4em 0.3em 0.4em 0.6em;">
    <castList style="display: flex; flex-direction: row; align-items: center; flex: 1; min-width: 0;">
      <castGroup style="display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; min-width: 0; padding-right: 0.2em;">
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Meretrix.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Shame.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Otian.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Mother.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Lady.</role>
        </castItem>
        <castItem style="display: block;">
          <role style="display: block; white-space: nowrap; line-height: 1.55em;">Queene.</role>
        </castItem>
      </castGroup>
      <metamark style="display: flex; align-items: center; align-self: stretch; white-space: nowrap; width: 2em; min-width: 2em; margin: 0 0.25em; transform: scaleX(3) scaleY(12); transform-origin: left center; margin-bottom: 1.8em;">}</metamark>
      <castGroup style="display: flex; align-items: center; align-self: stretch; padding-left: 3.5em;">
        <roleDesc style="display: block; white-space: nowrap; align-self: center;" rendition="rnd:italic">For one man.</roleDesc>
      </castGroup>
    </castList>
  </cell>
</row>

Prosopography

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 Beatrice 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