Article Documentation

Article Style

Article styles control the appearance of article cards on the timeline. You can define the default, hover, and active styles for all articles in Article Options, override them for a lane, or override them for individual articles in Article Data.

Styles can also be changed at runtime:

• Timeline defaults: timeline.setOption()
• Lane defaults: lane.setOption()
• Individual articles: article.setStyle(), article.setHoverStyle(), article.setActiveStyle()

Article cards are rendered using a card layout, such as the built-in portrait and landscape layouts. Each card layout can provide its own default styles.

Styles can be defined at the timeline, lane, card layout, and individual article levels, with more specific styles overriding broader defaults.

Default Style

The object below lists the complete set of available properties for styling article cards. The values are Histropedia's base defaults, except height and borderRadius, which show the selected landscape layout defaults. Click any property to see its description.

These properties can be used anywhere an article style object is used, including defaultStyle, defaultHoverStyle, defaultActiveStyle, layout-specific styles, and per-article styles.

defaultStyle in the article options object.

// Default style
{
  color: '#e5e5e5',
  width: 150,
  height: 70, // landscape only; layout default
  backgroundColor: '#fff',
  topRadius: 3, // portrait only
  borderRadius: 4, // landscape only; layout default
  maxImageHeight: 400, // deprecated Use image.maxHeight instead
  image: { // new
    shape: 'natural',
    margin: 0,
    maxHeight: 200, // portrait only
    borderRadius: 0
  },
  header: {
    height: 50,
    text: {
      font: "normal 14px 'Segoe UI'",
      color: "#333",
      align: "left",
      baseline: "middle",
      margin: 10,
      lineHeight: 18,
      numberOfLines: 2,
      offsetY: 0 // new
    }
  },
  subheader: {
    height: 30,
    color: '#555',
    text: {
      font: "normal 11px 'Segoe UI'",
      color: "#eee",
      align: "left",
      baseline: "middle",
      margin: 10,
      lineHeight: 6,
      offsetY: 0 // new
    }
  },
  shadow: {
    x: 0,
    y: 0,
    amount: 0,
    color: '#000'
  },
  border: {
    color: '#ddd',
    width: 1
  },
  connectorLine: {
    visible: true,
    offsetX: 18,
    offsetY: -20,
    thickness: 1,
    arrow: { width: 16, height: 45 }
  },
  star: {
    width: 16,
    margin: 3
  }
}

Hover Style

Define hover styles as overrides to the normal style. All of the same properties as the main style are supported. See all fields with descriptions in the default style section above.

defaultHoverStyle in the article options object.

// Default hoverStyle
{
  color: "#a6c6e2"
}

Active Style

Define active styles as overrides to the normal style. All of the same properties as the main style are supported. See all fields with descriptions in the default style section above.

defaultActiveStyle in the article options object.

// Default activeStyle
{
  color: "#337ab7",
  header: { 
    text: { color: "#fff" }
  },
  subheader: { color: '#333' },
  shadow: { x: 3, y: 3, amount: 5, color: '#333' },
  border: { width: 2, color: "#2e6da4" },
  connectorLine: { thickness: 2 }
}

Layout Styles

A timeline or lane can use layoutStyles to define overrides that apply only when a particular card layout is selected. These layout-specific styles are part of the general style cascade, not a separate or globally higher-priority styling system.

At either scope, defaultStyle, defaultHoverStyle, and defaultActiveStyle are applied first, followed by the matching layout's style, hoverStyle, and activeStyle. Configure timeline-level layout styles with the layoutStyles key in the article options object; each layout name acts as a key and supports the same properties as the corresponding general article style.

The built-in portrait layout adds no layout defaults. The landscape layout supplies these defaults before any explicitly configured timeline, lane, or article styles:

// layoutStyles
{
  // "portrait" has no additional layout style by default
  landscape: {
    style: {
      width: 220,
      height: 70,
      borderRadius: 4,
      image: {
        shape: "square",
        margin: 4,
        borderRadius: 4
      },
      header: {
        text: {
          color: "#333",
          baseline: "alphabetic"
        }
      },
      subheader: {
        text: {
          color: "#777",
          baseline: "alphabetic"
        }
      }
    },
    hoverStyle: {
      border: {
        color: "#a6c6e2"
      }
    },
    activeStyle: {
      header: {
        text: {
          color: "#000"
        }
      },
      subheader: {
        text: {
          color: "#333"
        }
      }
    }
  }
}

Style Cascade

Every article uses the same style cascade, whether it uses a built-in or custom card layout:

Histropedia defaults → card layout defaults → timeline → lane → article

Styles are deep-merged at each stage, so later layers only need to specify the properties they want to override.

For the normal article style, the complete precedence order is:

1. Histropedia's base article style;
2. the selected card layout's registered defaultStyle;
3. timeline article.defaultStyle;
4. timeline article.layoutStyles[name].style;
5. lane article.defaultStyle, when applicable;
6. lane article.layoutStyles[name].style, when applicable;
7. the individual article's style.

Within the timeline and lane scopes, the general style is applied first, followed by the matching layout-specific style. Each subsequent scope can still override either—for example, a lane's general style can override a timeline layout-specific style, and an individual article always has the highest priority.

Hover and active styles follow the same cascade using their corresponding defaultHoverStyle/hoverStyle and defaultActiveStyle/activeStyle properties. These are then merged over the resolved normal style. If an article is both hovered and active, the active style takes precedence over the hover style.