Initial TEI Formatting
This project makes use of simplified TEI formatting in order to retrieve the relevant
fashion items our team was interested in analyzing. We made heavy use, in
particular, of the 'referencing string' element ([14.2.1
Personal Names 3.6.1 Referring Strings]) and implemented a regex that
allowed for four possible values, each designating a point of interest.
<rs type='material'>satin</rs>
<rs type='color'>green</rs>
<rs type='garment'>dress</rs>
<rs type='garment-piece'>sleeve</rs>
For historical reasons, we also marked <persName> and
<placeName> when use of these topics was particularly
intriguing. However, for the purpose of our final analysis, the above are the most
relevant.
Reading View Creation
We host each archival article analyzed on this website via the scans available through the Vogue Archive service. Although we've consolidated this resource, we also utilized XSLT for a more user-friendly reading view page, accessable from the navigation bar or by clicking the corresponding article on the pages view.
The code to create the pages view looks as so:
<xsl:template match="/">
<html>
<head>
<title>Reading View</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
[...Navigation bar and other elements present across each page...]
<nav class="subnav">
<xsl:for-each select="$corpus//body">
<a href="#article{position()}"><xsl:value-of select="1885 + 10*position()"/></a>
</xsl:for-each>
</nav>
<div id="reader">
<xsl:apply-templates select="$corpus//body"/>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="body">
<div class="entry" id="article{position()}"><xsl:apply-templates/></div>
</xsl:template>
<xsl:template match="p">
<p><xsl:apply-templates/></p>
</xsl:template>
<xsl:template match="rs[@type='material'] | rs[@type='garment'] | rs[@type='color']">
<strong><xsl:apply-templates/></strong>
</xsl:template>
<xsl:template match="note[@type='image']">
<span class="articleImg"><xsl:apply-templates/></span>
</xsl:template>
Swatch Gallery Breakdown
The swatch page on this website takes inspiration from fabric and color swatches seen in fashion design. It was created through XSLT. First, a list of all marked-up colors were retrieved:
<div class="colorGrid">
<xsl:for-each-group select="distinct-values($corpus//rs[@type = 'color'])"
group-by="upper-case(.)">
<div class="swatch">
<p>
<xsl:value-of select="upper-case(.)"/>
</p>
<div class="sampleColor" style="background-color: {.};"/>
</div>
</xsl:for-each-group>
As seen above, each unique color was transformed into an html <div> element. In a more human readable format, the end result looks like so:
<div class="swatch">
<p>COLOR NAME</p>
<div class="sampleColor" style="background-color: COLOR NAME;"/>
</div>
The intent was for the color name to auto-populate the <div> containing the color preview, however, CSS does not recognize many colors by text name (and certainly not in the somewhat archaic ways archival Vogue tended to refer to these colors!). We went through each unique color and selected custom hex values closest to how we interpreted the colors to be used within their original contexts.
For the most part, this code was functional at avoiding repeats, but we went through and removed the colors that weren't meaningfully different enough from each other, e.g., Gray and Grey or Olive Green and Olive Toned Green. This page is focused on displaying the multitude of unique colors in our selected articles. For more generalized color trends across this data, refer to the Summary page.
Summary Workflow
The sumamry page, at its base, is also built around XSLT retrieval. Every unique color, garment, and material was originally listed and counted, like so:
<xsl:for-each select="
$vogueColl//rs[@type = 'VALUE']
! normalize-space()
=> distinct-values()
=> sort()">
<tr>
<td>
<xsl:value-of select="."/>
</td>
<td>
<xsl:value-of
select="count($vogueColl//rs[@type = 'VALUE'][normalize-space() = current()])"
/>
</td>
<td>
<xsl:value-of select="
$vogueColl//rs[@type = 'VALUE'][normalize-space() = current()]
! root(.)//bibl//date
! normalize-space()
=> distinct-values()
=> sort()"
separator=", "/>
</td>
</tr>
</xsl:for-each>
This gave us a list of each individual garment, color, and material; what years they appeared in, and how many times they did across all Vogue selections. We then consolidated them into categories for a slightly more generalized and far more useful dataset. It was imperative to mix both human discretion and algorithmic sorting due to the smaller scale of our corpus.