An introduction to Cascading Stylesheets (CSS) and publishing your diary entries.
In order to easily publish your TEI files on the web, we’re going to use a ready-built system that basically gives the web instructions about how to “read” your text. But there are other things that you may want to do with your published pages that could make them more aesthetically pleasing to you OR could help you to think differently about some of the words you marked up and why. Before you can experiment with those aspects, we need to do a few things:
INSTRUCTIONS:
1) Copy your TEI files into the “content” directory in this folder.
2) Open one of your files (you can repeat this with the others when you’ve finished this one) in oXygen.
3) Copy and paste these lines of code at the top of your file, replacing the first line at the top of the file:
<?xml version=”1.0″ encoding=”UTF-8″?>
<?xml-model href=”http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng” schematypens=”http://relaxng.org/ns/structure/1.0″?>
<?xml-stylesheet type=”text/xsl” href=”teibp.xsl”?>
<?xml-stylesheet title=”your own CSS” type=”text/css” href=”../css/custom.css” alternate=”yes”?>
Make sure your file is validated.
4) Open the “css” directory and open the “custom.css” file in oXygen.
The code you see here gives instructions about formatting and style. You can change the width of your text box, change the font style or color, or experiment with more complex presentation.
** I’ve taken the liberty of including some of the superscript and subscript styles already.
5) Once you’ve saved the TEI file, open it in Firefox (for some reason you can’t open the files locally in Chrome or Safari … but once they’re published online you should be able to see them in any browser).
Now try to experiment with some layout adjustments.
Where you see “p” in the css file, change “Times New Roman” to “Monaco” or “Arial” then save the file and refresh the browser window. You can change the font face – or text color or change the style to bold or italic. Try this:
– still under “p”, insert a line after the font family line. Type this:
font-style: italic;
then save and refresh your browser.
– still under “p”, insert another line. Type this:
color: blue;
There are other ways you can adjust the text that way, but you get the point.
What if you want to emphasize a particular type of markup that you think was important?
In a new blank space on the css file – perhaps after the closing curly bracket for “p”, type this:
placeName {
font-weight: bold;
}
You’re telling the computer that every time it sees the tag <placeName> it should make that text bold. This can be helpful when you’re look at your text to see how important places are to Brother Payne. You can do experiment with color and style and font size, and try the same thing with <persName> or <date> or other types of tags.
You can get more sophisticated about how you want to look at your markup in the browser – and why you want others to look at certain things, too.
I’ve added some examples of how you can tease at TEI attributes like “type” and “n” for specific
refined tagging you’ve done in your entries.
Look at the section of the CSS file where it says: /* More word types to experiment with */
Right after that you’ll see
placeName[type=”city”] {
font-style: italic;
font-weight: bold;
}
Right now it’s in green, because I’ve commented it out. Remove the /* before placeName and the */ after the }
Save the file and refresh your browser. If in your diary entry you’ve marked up <placeName type=”city”>some city</placeName>
then it will appear in the browser as italic and bold.
I’ve added some others for you to experiment with. Try your own by altering some of the elements and attributes.
This is just the beginning ….
Leave a Reply