LEMDO has created a default stylesheet that should capture the basic composition and mise-en-page of most early modern playbooks. Some playbooks deviate from this basic mise-en-page in consistent ways, in which case you can use anthology-level CSS or create renditions in the <teiHeader> of each individual file. Inline deviations from the anthology-level CSS or file-level renditions can be described using inline CSS. 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 or by regular CSS, use advanced CSS options such as CSS Flex.

Only use the advanced CSS options outlined in this documentation if: If you think that your file requires advanced CSS but you do not have the experience necessary to use it, please contact lemdotech@uvic.ca.

CSS Flex allows us to truthfully encode and accurately render features that cannot be captured by standard CSS.

CSS typically uses 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 lemdotech@uvic.ca.

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> ), and 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 components included in the value of @style. Format these as you do for typical CSS (i.e., put a semicolon after each component and separate components with a space). The first component is "display". Because we are using CSS Flex, we want to have the value "display: flex;". The second component is "flex-direction". You have the option to use either "flex-direction: row;" or "flex-direction: column;". 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 centred in horizontal space. The third component is "align-items". We typically want items to be centred when we use CSS Flex, so use "align-items: center;" (note American spelling in CSS values).

You should now have something that looks either like this: or like this:

To stretch your braces, add a @style attribute to the <metamark> element. There are three components to the value for @style. The first component is "transform", which defines the axis that you want to stretch. For long braces, you will stretch the vertical or Y axis. To do this, encode as "transform: 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);"). The second component is "transform-origin", which defines where the stretch starts. We typically want this to be "transform-origin: left-top;". The third component is "margin", which contains four numerical values seperated 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 em 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 ems from the top and 0.2 ems from the left:

You will likely need to tweak the margin values. See for options for checking and tweaking your CSS Flex 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:

To check and tweak your CSS using a local build, follow these steps: 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:

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

The following resources have helpful information and tools for learning and practicing CSS Flex: