Mark Twain in German-Language Newspapers and Periodicals

Design Notes for Project Pages

Overview of page types and structures

A - Content Page Types

1. Structural Pages

free form depending on content and purpose; e.g. start page, introduction, zotero reference page, etc.
  • description as needed: short descriptive phrase OR "reference tools"

2. Catalog Pages

overview of large amounts of data via "datatables"
  • URL: short, descriptive (e.g. "catalog-newspaper-articles", "overview-writing-and-speeches")
  • description: "catalog page"
  • content area:
    • explanation table (id=#expltable):
      <table id="expltable"><thead><tr><td colspan="2">headline spanning both columns</td></tr></thead><tbody><tr><td colspan="2"><u>Explanations</u>:</td></tr><tr><td><ul><li>Each <strong>date</strong> links to the image of the original newspaper page in the <em>Chronicling America</em> database.</li><li>explanation in bullet points on the left side</li></ul></td><td><li>explanation in bullet points on the right side</li></ul></td></tr><tr><td colspan="2">optional explanation spanning both columns</td></tr></tbody></table>
    • content catalog table (based on datatables code; id=#newtable)

3. Newspaper Article Pages

table design w/ 2 or 3 columns to display screenshot, transcript, and translation/original
  • URL: auto-generate from page title
  • title: "title | DD Mon YYYY" (title: original article title OR [short description in brackets])
  • description: "newspaper article"
  • content area:
    • source/citation at the top (copied from the corresponding repository page)
    • optional: contextual information on the article at the top
    • screenshot of item
      • 3-column design: "Inline Scalar Media Link"; size: "small"; text wrap: "around text"; align: "left"; caption "title"
      • 2-column design: "Inline Scalar Media Link"; size: "medium"; text wrap: "around text"; align: "left"; caption "title"
    • main text table (contains German transcript and English translation / English original):
      • 3-column design (id=#transtext):
        <hr />link<hr />image<table id="transtext"><tbody><tr><th><u>Transcription</u></th><th><u>English Translation</u></th></tr><tr><td>text</td><td>text</td></tr></tbody></table>
      • 2-column design (id=#transtext2):
        <hr />link<hr /><br /><span class="note" rev="scalar:has_note" resource="changes-in-translation" data-show-title="no" data-show-description="no" data-show-content="yes" data-type="undefined"> Key to annotations on German translations of Mark Twain's original texts </span><br />image<table id="transtext2"><tbody><tr><th><u>Transcription</u></th><th><u>English Translation / Original Text</u></th></tr><tr><td>text</td><td>text</td></tr></tbody></table>
    • annotations of relevant key words (via annotation pages A4.1): "Insert Scalar Note"; show title: "yes"; show description: "no"; show content: "yes"
  • metadata for article pages:
    • dcterms:source: name of the newspaper
    • dcterms:date: date of publication in the format "YYYY-MM-DD"
    • dcterms:dateSubmitted: date the page was created in the format "YYYY-MM-DD"
    • dcterms:creator: abbreviated name of page author
    • dcterms:identifier: unique ID for each article consisting of State abbreviation and number; e.g. "IA-001"

4.1 Annotation Pages

context and explanations for relevant key words on newspaper article pages (A3)
  • URL: auto-generate from page title
  • title: "topic" or "main topic | sub topic"
  • description: brief summary of topic (optional?)
  • content area: explanatory text including citations and pictures (optional)
    • citations: MLA formatting,
      • direct link to zotero bibliography for all sources (avoid direct links to digital versions of the source, because these links will likely break over time; it's easier to keep them updated in zotero than on individual pages)
      • primary MT texts: link to appropriate annotation page ?
    • pictures: "Inline Scalar Media Link"; size / text wrap / align: as needed; caption: "description"
  • metadata:
    • dcterms:relations: e.g. "-annotation -main -person"
      • for all items: "-annotation"
      • depending on topic hierarchy: "-main" OR "-sub"
      • depending on topic: "-person"; "-event"; "-location"; "-publication" (for newspapers); "-mtSpeech"; "-mtWriting"; "-anecdote"
    • dcterms:date: date of writing (optional)
    • dcterms:creator: name abbreviation of page author
  • additional info for subcategories:
    • people: add year of birth and death in description, e.g. "(1824-1908)"
    • event: structure title as "topic | date (DD Mon YYYY)", e.g. "Vienna | Visiting Parliament | 28 Oct. 1897"

4.2 Context Pages

provide further context on illustrative media (B2) in the form of "annotation pop ups" (using scalar's image annotation functionality)
  • URL: auto-generate from page title
  • title: "sub topic | content" (e.g. "Hotel Schrieder | Advertisement (1878) | Transcript")
  • description: none
  • metadata:
    • dcterms:source: url OR citation of source (if available, e.g. in case of transcripts)
    • dcterms:creator: name abbreviation of page author (optional)
Some context pages only consist of a title, if they are used to show a location or person on an image without providing further information; additional metadata: dcterms:relation: "-snippet"

5. Project Organisation Pages

context and explanations for project development and test pages to develop scalar display options and layout
  • description: "project organisation" OR "test page"
  • free form content depending on purpose

B - Media Page Types (images)

1. Article Screenshots

  • URL: auto-generate from page title
  • title: "title | DD Mon YYYY" (identical to corresponding article page)
  • description: "image"
  • metadata:
    • dcterms:source: URL of repository page;
    • dcterms:date: date of publication "YYYY-MM-DD" (identical to corresponding article page)
    • dcterms:identifier: unique ID for each article consisting of State abbreviation and number; e.g. "IA-001"(identical to corresponding article page)

2. Other Illustrative Media (for annotation pages)

  • URL: auto-generate from title
  • title: "main topic | image content (date DD Mon YYYY)" or "main topic | sub topic | image content (date DD Mon YYYY)" (date optional for dated content, i.e. newspaper clippings, periodicals, etc.)
  • description: descriptive, short phrase (source, what is depicted, medium, etc.)
  • metadata:
    • dcterms:date: date of publication (if available)
    • dcterms:source: url OR citation

Additional Design Notes

Design for Grenzboten pages

2 columns, wider than usual 2-column design (A3)
<hr /><i>Die Grenzboten</i> 33 (1874) 2. Semester, 2. Band, 306-314.&nbsp; | Page 311 |&nbsp; [<a target="_blank" href="https://brema.suub.uni-bremen.de/periodical/pageview/132534">SUB Bremen</a>] [<a target="_blank" href="https://digitale-sammlungen.de/de/view/bsb11189558?page=318">MDZ</a>]<table id="transtext2"><tbody><tr><th><u>Transcription</u></th><th><u>English Translation</u></th></tr><tr><td>LEFT-COLUMN<br>[end page XXX]</td><td><a data-size="small" data-align="right" data-caption="none" data-annotations="" class="inline wrap" resource="FILENAME" name="FILENAME"></a>RIGHT-COLUMN</td></tr></tbody></table>

Footnotes on Text Pages

create footnotes and a back-link to the main text
<a id="fn-1-ref" href="#fn-1">[1]</a> MAIN TEXT

Notes:
<p id="fn-1">[1] *** Explanatory text *** <a href="#fn-1-ref">&#8617;</a> </p>

Adjust Letter Spacing

<span style="letter-spacing:2px;">Test word</span>

Overview of Table Designs

these tables have dedicated CSS designs (refer to Overview of CSS for details) and can be used by referring to their ID while setting up a new table on any page:
  • #newtable:
    • datatables design that is used on main catalog pages (A2)
    • contains formatting for text styling, padding, and header/footer design
    • number of columns can vary, but consider that some columns have special formatting which should not be changed
    • (example: Catalog of Newspaper Articles)
  • #transttext / #transtext2:
    • tables for newspaper article pages (A3)
    • contain basic formatting for width, text alignment, and padding
    • (example: Wie man sein Glück macht)
  • #expltable:
    • table for explanatory header on catalog pages
    • contains formatting for text size and color, changed font, padding, and alignment
    • (example: Catalog of Newspaper Articles)
  • #editortable:
    • simple 3-column table design in use on project organisation page
    • contains basic formatting for text alignment, padding, changed font, and smaller text size
    • (example: Overview of Major Edits)

Overview of CSS

refer to this overview for better searchability
updated: 12-11-2024
/* Text content area to full width */

.body_copy {
  max-width: none;
}


/* Style page area to be wider */

.page {
max-width: 70% !important;
}


/* Style page header to be bigger */

.page h1.heading_font {
  font-size: 2rem;
}


/* Change background color of pages and justify text */

.page {
  background-color: #fff2e6;
  text-align: justify;
}


/* Change list items to have list marker outside text area */

ul {
  list-style-position: outside;
}



/* Table styling */

/* Table for article pages: transtext: styling of 3-column table with  image left*/

#transtext {
  border-collapse: collapse;
  width: 64%;
  border: 0px solid #ffffff;
}

#transtext td, #transtext th {
  width: 31%;
  padding: 14px;
}

#transtext th {
  text-align: center;
}

#transtext td {
  text-align: justify;
}


/* Table for article pages: transtext2: styling of 2-column design with image above*/

#transtext2 {
  border-collapse: collapse;
  width: 100%;
  border: 0px solid #ffffff;
}

#transtext2 td, #transtext2 th {
  width: 48%;
  padding: 14px;
}

#transtext2 th {
  text-align: center;
}

#transtext2 td {
  text-align: justify;
}


/* Table for catalog pages: main datatables styling */

#newtable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  line-height: 125%;
  width: 100%;
}

#newtable td  {
  text-align: left;
}

#newtable td:first-child, #newtable td:last-child {
  font-size: 1rem;
}

#newtable td:nth-child(3) {
  letter-spacing: -0.8px;
}

#newtable td:nth-child(4) {
  font-style: italic;
}

#newtable td:nth-child(6), #newtable td:nth-child(7), #newtable td:nth-child(8), #newtable td:last-child {
  text-align: center;
}

#newtable td:nth-child(7) {
  font-weight: bold;
}

#newtable tfoot input, #newtable thead input {
  width: 100%;
  padding: 1px;
  box-sizing: border-box;
}


/* Styling for catalog page explanation table*/

#expltable td {
  color: #666;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 2rem;
  vertical-align: top;
  padding-bottom: 1rem;
  padding: 0.5rem;
}

#expltable td li {
  padding-bottom: 1rem;
}


/* Styling for simple 3-column editorTable*/

#editortable td, #editortable th {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
  font-size: small;
  font-family: 'Lato', Arial, sans-serif;
}

#editortable th {
  font-weight: bold;
  border-bottom: 2px solid #666;
}



/* "Relationship" link styling */

/* Hide relationship link headers and links from categories other than "note" */

section.relationships h1 {
  display: none !important;
}

section ul.annotation_of, section ul.tag_of, section ul.reply_of, section ol.has_tags {
  display: none !important;
}


/* Styling of "note" relationship link list */

section.relationships {
  padding: 3rem 0rem !important;
  max-width: 100%;
}

section ul.has_reference {
  list-style: none !important;
  padding: 1rem 2rem;
  font-size: 2rem;
  font-family: 'Lato', Arial, sans-serif;
  border-left-style: solid !important;
  border-width: 2.5rem !important;
  border-color: #666 !important;
}

section ul.has_reference li {
padding-bottom: 1.5rem;
}


/* Hide images from annotation relationships at the bottom of the page */

div.slot.full.pillarbox, .caption_font.mediainfo {
  display: none !important;
}


/* Unhide normal media info boxes */

.page span div.slot.full.pillarbox, .page span .caption_font.mediainfo {
  display: unset !important;
}



/* Card widget styling */

/* Position of card widget: wrapped */

.wrapped_slot.right_slot .widgetContainer.well, .wrapped_slot.left_slot .widgetContainer.well {
  min-width: 25% !important;
}


/* Styling of card widget */

.card div.thumbnail {
  background-color: #f7e0c0 !important;
  border-radius: 1rem !important;
  border: none !important;
  text-align: center;
  padding: 0.5rem;
}

.cardContainer h4 {
  font-size: 2rem !important;
  font-weight: normal !important;
  color: #333;
}

.card p.description-sm {
  display: none !important;
}

.card div.thumbnail a.goThereLink.btn.btn-default {
  background-color: #f7e0c0 !important;
  border: none;
}



/* Styling of pop-ups */

/* Styling of annotation layer pop-up to be bigger and scrollable */

div.annotorious-annotationlayer div.annotorious-popup {
  width: 42rem !important;
  max-height: 50rem;
  overflow-y: auto;
  border-radius: 1rem;
}

div.annotorious-annotationlayer div.annotorious-popup div.image-annotation-wrapper {
  width: 40rem;
}


/* Styling of annotation layer square to be better visible in images */
.annotorious-item-unfocus {
  opacity:1;
}


/* Styling of note pop-up */

div.note_viewer {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 1rem;
  box-shadow: 0px 5px 15px #111;
}

This page has paths: