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.

Use Histropedia.UNSET to remove a style override and restore inheritance. For automatic sizing, padding, images, and compatibility notes, see Article Sizing.

Default Style

The object below lists the complete set of available properties for styling article cards. The values show portrait defaults, plus the optional maxWidth cap and landscape's borderRadius. 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, // New values
  height: 'auto', // New values portrait default; landscape: 70
  maxWidth: undefined, // New optional cap for width: 'auto'
  backgroundColor: '#fff',
  topRadius: 3, // portrait only
  borderRadius: 4, // landscape only; layout default
  maxImageHeight: 400, // Deprecated Use image.maxHeight instead
  image: { // Since v1.3
    visible: true, // New
    shape: 'natural',
    margin: 0, // New values
    maxHeight: 200,
    borderRadius: 0
  },
  header: {
    color: undefined, // New falls back to article color
    padding: 0, // New
    height: 50, // New values
    text: {
      font: "normal 14px 'Segoe UI'",
      color: "#333",
      align: "left",
      baseline: "middle",
      margin: 10,
      lineHeight: 18,
      numberOfLines: 2,
      offsetY: 0 // Since v1.3
    }
  },
  subheader: {
    padding: 0, // New
    height: 30, // New values
    color: '#555', // Changed
    text: {
      font: "normal 11px 'Segoe UI'",
      color: "#eee",
      align: "left",
      baseline: "middle",
      margin: 10,
      lineHeight: 14, // Default changed
      numberOfLines: 1, // Changed
      offsetY: 0 // Since v1.3
    }
  },
  shadow: {
    x: 0,
    y: 0,
    amount: 0,
    color: '#000'
  },
  border: {
    color: '#ddd',
    width: 1
  },
  connectorLine: {
    color: 'article', // New
    dash: [], // New
    lineCap: 'butt', // New
    visible: true,
    offsetX: 18,
    offsetY: -20,
    thickness: 1, // New values
    arrow: {
      visible: true, // New
      color: 'inherit', // New
      width: 16, height: 45 }
  },
  star: {
    width: 16, // Changed
    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" }
  },
  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.

Default changed The built-in portrait layout registers automatic height and the dark active subtitle fill. The landscape layout supplies these defaults before any explicitly configured timeline, lane, or article styles:

// layoutStyles
{
  portrait: {
    style: { height: 'auto' },
    activeStyle: { subheader: { color: '#333' } } // Default changed
  },
  landscape: {
    style: {
      width: 220,
      height: 70,
      borderRadius: 4,
      image: {
        shape: "square",
        margin: 4,
        borderRadius: 4
      },
      header: {
        height: 'auto',
        color: 'transparent',
        text: {
          color: "#333",
          baseline: "alphabetic"
        }
      },
      subheader: {
        height: 'auto',
        color: 'transparent',
        text: {
          color: "#777",
          offsetY: 3,
          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.