All Guides

For Reader Developers

How to parse Byline elements and display rich author context in your feed reader.

Parsing Byline Data

XML Feeds (RSS/Atom)

Look for the Byline namespace (https://bylinespec.org/1.0) and parse elements with the byline: prefix.

// Example pseudocode
const BYLINE_NS = "https://bylinespec.org/1.0";

function parseBylineContributors(feedElement) {
  const contributors = feedElement.getElementsByTagNameNS(
    BYLINE_NS,
    "person"
  );
  return Array.from(contributors).map(person => ({
    id: person.getAttribute("id"),
    name: getChildText(person, BYLINE_NS, "name"),
    context: getChildText(person, BYLINE_NS, "context"),
    url: getChildText(person, BYLINE_NS, "url"),
    avatar: getChildText(person, BYLINE_NS, "avatar"),
    // ... etc
  }));
}

JSON Feed

Check for the _byline key at feed and item level.

function parseByline(feed) {
  const byline = feed._byline;
  if (!byline) return null;

  return {
    version: byline.version,
    contributors: byline.contributors || [],
    organizations: byline.organizations || []
  };
}

Displaying Author Information

Author Cards

Recommended elements to display:

  • • Name: Always show, link to url if available
  • • Avatar: Show if available, fall back to generated avatar
  • • Context: Show on hover, tap, or in detail view
  • • Verified indicator: For profiles with reciprocal rel="me" links

Perspective Badges

Consider showing subtle visual indicators for non-default perspectives:

  • • personal: "Opinion" badge
  • • sponsored: "Sponsored" badge (important!)
  • • satire: "Satire" badge
  • • official: "Official" badge
  • • reporting: No badge needed (default expectation)
Don't overwhelm
Badges should be subtle. The goal is to inform, not to make the feed visually noisy. Consider user preferences to show/hide badges.

Handling Themes

Author-specified colors are hints, not requirements. If you choose to honor them:

  • • Validate hex color format (#RRGGBB)
  • • Ensure WCAG AA contrast (4.5:1 for normal text)
  • • Use for subtle accents (borders, highlights), not backgrounds
  • • Allow users to disable author theming
function applyAuthorTheme(theme, element) {
  if (!theme?.color) return;

  // Validate hex format
  if (!/^#[0-9A-Fa-f]{6}$/.test(theme.color)) return;

  // Check contrast before applying
  if (hasGoodContrast(theme.color, getBackground(element))) {
    element.style.borderColor = theme.color;
  }
}

Profile Verification

To verify a profile link, follow the rel="me" pattern:

  1. 1. Fetch the author's primary URL (from url element)
  2. 2. Check for a link with rel="me" pointing to the profile
  3. 3. Fetch the profile page
  4. 4. Check for a reciprocal rel="me" link back
  5. 5. If both links exist, the profile is verified
Cache verification results
Verification requires fetching external pages. Cache results and refresh periodically (e.g., weekly) rather than checking on every feed refresh.

Graceful Degradation

When Byline data is missing, fall back to standard elements:

  1. 1. Atom: <author>/<name>, <author>/<uri>
  2. 2. RSS: <dc:creator>, <author>
  3. 3. JSON Feed: authors array

Never require Byline for basic functionality. Byline is additive enhancement.

Building an Identity Graph

Because profile links point to external identities, you can:

  • • Recognize the same person across different feeds
  • • Build a "following" concept based on person, not feed
  • • Suggest feeds based on profile overlap
  • • Enable filtering by person across all subscriptions
// Simple identity matching
function findMatchingAuthors(newAuthor, knownAuthors) {
  const newProfiles = new Set(
    newAuthor.profiles?.map(p => p.href) || []
  );

  return knownAuthors.filter(known => {
    const knownProfiles = known.profiles?.map(p => p.href) || [];
    return knownProfiles.some(p => newProfiles.has(p));
  });
}

Related