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"
  • most of these pages have individual CSS styling in the "Styling" tab of the page editor (e.g. start page, overview pages); try to minimize individual page styling by using specific CSS descriptors that can be used in the style area of the page's main dashboard (see Overview of CSS)

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 (for a more detailed explanantion see "Citations"):
      • MLA formatting
      • short in-text citation with direct link to zotero bibliography
      • newspaper articles (not part of the project collection): complete bibliographical data
      • newspaper articles (part of project collection): link to item page on scalar
    • 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>

Citations

all citations use MLA formatting
  • newspaper articles that are not part of the project collection:
  • newspaper articles that are part of the project collection:
    • link to item page on scalar referencing the title,
    • inclusion of biographical data is not necessary, but might be useful depending on context,
    • e.g.: The following text partially reproduces one such lengthy article entitled "Im Freundeskreise | 14 March 1892" published by the Illinois Staats-Zeitung.
  • all other sources:
    • short in-text citation,
    • direct link to zotero bibliography (avoid direct links to digital versions of the source, because these links will likely break over time; it's easier to include and keep them updated in zotero),
    • e.g.: The original letters can be found in Mark Twain on Potholes and Politics (Scharnhorst, 48-62).

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: