Styling of Markdown headings in Apple News components

Question

I have the following generated ANF document:

{
  "version": "0.10.13",
  "identifier": "http://test.domain.com?p=123456",
  "title": "Test Apple News Post",
  "language": "en",
  "layout": {
    "columns": 7,
    "width": 1024
  },
  "components": [
    {
      "text": "Test Apple News Post",
      "role": "title",
      "layout": {
        "margin": {
          "bottom": 30
        }
      }
    },
    {
      "text": "# Heading 1\n\n## HEADING 2\n\n### Heading 3\n\n#### Heading 4\n\n##### Heading 5\n\n###### Heading 6",
      "format": "markdown",
      "role": "body",
      "layout": "bodyLayout"
    }
  ],
  "componentTextStyles": {
    "default": {
      "linkStyle": {
        "textColor": "#DF0033"
      },
      "fontName": "Georgia",
      "fontSize": 12
    },
    "default-title": {
      "fontName": "Georgia-Bold",
      "fontSize": 24
    },
    "default-heading": {
      "fontName": "Georgia-Bold",
      "fontSize": 24
    },
    "default-heading1": {
      "fontName": "Georgia-Bold",
      "fontSize": 24
    },
    "default-heading2": {
      "fontName": "DINCondensed-Bold",
      "fontSize": 18
    },
    "default-heading3": {
      "fontName": "Georgia-Bold",
      "fontSize": 22,
      "textColor": "#FF0000"
    },
    "default-heading4": {
      "fontName": "Georgia-Bold",
      "fontSize": 20,
      "textColor": "#00FF00"
    },
    "default-heading5": {
      "fontName": "Georgia-Bold",
      "fontSize": 18,
      "textColor": "#0000FF"
    },
    "default-heading6": {
      "fontName": "Georgia-Bold",
      "fontSize": 16,
      "textColor": "#FF00FF"
    }
  },
  "metadata": {
    "datePublished": "2016-06-06T04:25:34+00:00",
    "dateCreated": "2016-06-06T04:25:34+00:00",
    "dateModified": "2016-06-27T01:05:27+00:00",
    "canonicalURL": "http://test.domain.com?p=123456",
    "thumbnailURL": "http://dummyimage.com/1000x500/000/ffffff&text=Apple+News+Image+1",
    "keywords": [
      "tag1",
      "tag2",
      "tag3"
    ],
    "excerpt": "This is the excerpt text, woo!"
  },
  "componentLayouts": {
    "bodyLayout": {
      "columnStart": 0,
      "columnSpan": 7,
      "margin": {
        "bottom": 15
      }
    }
  }
}

My problem is that it seems as though font size is never applied for headings 3 through 6, as far as I can tell.

The goal I am seeking to obtain is that h1 is a large heading in Georgia Bold (with the same style as the title component in the document), h3 - h6 are gradually smaller versions of the same, and h2 is a special case that shows a smaller, condensed heading style. I expected this to be fairly simple, but here is my output:

As you can see, there are a few strange things happening here:

Clearly the fontName property is being picked up from default-heading2, as we see the condensed font used there
The textColor properties I added to ensure that the default-heading3 - default-heading6 do anything at all are being picked up and applied.
I think that the fontSize property is being picked up at least on the h2, but can't be sure, maybe that's just the difference in the size of the font itself.

I have also tried removing the entire default-heading componentTextStyle, on the thought that this might be some kind of weird inheritance thing, but saw no change.

Edit: Also, I've tried reversing entirely the order of the componentTextStyle's on the root element (so that default-heading6 is defined first, followed by default-heading5 etc, then after default-heading1, finally default-heading is defined), and also increased the version property of the root element to 1.1.0, based on a warning generated by the preview app. Neither of these changed the output.

score 0 · Answer 1 · answered Jun 27 '16 at 05:54

OK then, after some investigation, it would appear that there is an undocumented minimum font size for headings in Apple News Format Documents. I was able to surmise this by trial & error modification of the test document in the initial question, eventually leading to the following:

{
  "version": "1.1.0",
  "identifier": "http://test.domain.com?p=123456",
  "title": "Test Apple News Post",
  "language": "en",
  "layout": {
    "columns": 7,
    "width": 1024
  },
  "components": [
    {
      "text": "Test Apple News Post",
      "role": "title",
      "layout": {
        "margin": {
          "bottom": 30
        }
      }
    },
    {
      "text": "# Heading 1\n\n## Heading 2\n\n### Heading 3\n\n#### Heading 4\n\n##### Heading 5\n\n###### Heading 6",
      "format": "markdown",
      "role": "body",
      "layout": "bodyLayout"
    }
  ],
  "componentTextStyles": {
    "default": {
      "linkStyle": {
        "textColor": "#DF0033"
      },
      "fontName": "Georgia",
      "fontSize": 12
    },
    "default-title": {
      "fontName": "Georgia-Bold",
      "fontSize": 24
    },
    "default-heading": {
      "fontName": "Georgia-Bold",
      "fontSize": 24
    },
    "default-heading1": {
      "fontName": "Georgia-Bold",
      "fontSize": 20
    },
    "default-heading2": {
      "fontName": "Georgia-Bold",
      "fontSize": 21
    },
    "default-heading3": {
      "fontName": "Georgia-Bold",
      "fontSize": 22,
      "textColor": "#FF0000"
    },
    "default-heading4": {
      "fontName": "Georgia-Bold",
      "fontSize": 23,
      "textColor": "#00FF00"
    },
    "default-heading5": {
      "fontName": "Georgia-Bold",
      "fontSize": 24,
      "textColor": "#0000FF"
    },
    "default-heading6": {
      "fontName": "Georgia-Bold",
      "fontSize": 25,
      "textColor": "#FF00FF"
    }
  },
  "metadata": {
    "datePublished": "2016-06-06T04:25:34+00:00",
    "dateCreated": "2016-06-06T04:25:34+00:00",
    "dateModified": "2016-06-27T01:05:27+00:00",
    "canonicalURL": "http://test.domain.com?p=123456",
    "thumbnailURL": "http://dummyimage.com/1000x500/000/ffffff&text=Apple+News+Image+1",
    "keywords": [
      "tag1",
      "tag2",
      "tag3"
    ],
    "excerpt": "This is the excerpt text, woo!"
  },
  "componentLayouts": {
    "bodyLayout": {
      "columnStart": 0,
      "columnSpan": 7,
      "margin": {
        "bottom": 15
      }
    }
  }
}

Which has the following output:

As the font only starts to actually increase as of the h6 element, I would surmise that the heading font size is clamped to a minimum of 24 points.

Styling of Markdown headings in Apple News components

1 Answers1