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 to nest the table within the title page. If your table is located anywhere else, please see to encode a typical cast list.

We encode tables according to the following pattern: 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 .

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:

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):

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: Ambidexter Triall. } For one man.

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: Ambidexter Triall. } For one man. 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.

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.

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.

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. Knight, Snuf. small habilitic. Proof. Execution. Attendance. second Lord. } For one man. Meretrix. Shame. Otian. Mother. Lady. Queene. } For one man.