Search code examples
htmlmicrosoft-graph-apionenote

Microsoft Graph API - OneNote - Adding Line Height


I can add line height in the OneNote app, but when I download the page's HTML via the API, I don't see any HTML that would indicate the line height is set.

For example - take this page...

OneNote page - plain text input - no line spacing

The HTML generated is...

<html lang="en-US">
    <head>
        <title>Page Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="created" content="2022-02-17T21:57:00.0000000" />
    </head>
    <body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
        <div style="position:absolute;left:48px;top:115px;width:720px">
            <p style="margin-top:0pt;margin-bottom:0pt">~~~...ALL THAT TEXT FROM THE IMAGE...~~~</p>
        </div>
    </body>
</html>

Here's how I set the line spacing...

Setting the line spacing in OneNote for the page

And here's the OneNote page with the line spacing applied

But, as you can see, the HTML retrieved for that page from API doesn't really change.

<html lang="en-US">
    <head>
        <title>Page Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="created" content="2022-02-17T21:57:00.0000000" />
    </head>
    <body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
        <div style="position:absolute;left:48px;top:115px;width:720px">
            <p style="margin-top:0pt;margin-bottom:0pt">~~~...ALL THAT TEXT...~~~</p>
        </div>
    </body>
</html>

At this point, my guess is the line height (like the page background, etc.) is not stored with the page and not accessible via the API (unless someone knows different). So, I think I'm going to have to try to work with the OneNote supported HTML tags to figure out a different solution.

Again, I'm trying to control line height / spacing. All I could find on allowed tags is in the MS Graph API documentation, but it links out to what appears to be a more complete list, but the link is broken -- https://github.com/microsoftgraph/microsoft-graph-docs/blob/main/concepts/onenote-create-page.md

I've tried -

  • The line height style, but that seems to have no effect (assuming it's not supported by OneNote)
  • I've tried making every space in the content a span with a different font-height and space, but that ends up with some weird formatting

Solution

  • I am not export in OneNote, But as per your requirement it seems we can get the below INPUT attribute in OUTPUT attribute on our HTML code.

    data-id,data-tag,id,style

    For example:

    Input Attribute:

    <h1>Heading <i>One</i> text</h1>
    <p style="font-size:8pt;color:green;font-family:Courier;text-align:center">Some text</p>
    <p>Some <span  style="font-size:16px;color:#ff0000;font-family:Segoe UI Black">more</span> text</p>
    

    Output Attribute:

    <h1 style="font-size:16pt;color:#1e4e79;margin-top:11pt;margin-bottom:11pt">Heading <span style="font-style:italic">One</span> text</h1>
    <p style="text-align:center"><span style="font-family:Courier;font-size:8pt;color:green">Some text</span></p>
    <p>Some <span style="font-family:Segoe UI Black;font-size:12pt;color:red">more</span> text</p>
    

    For more information please refer this MICROSOFT DOCUMENTATIONs:- Input and output HTML in OneNote pages & Create OneNote pages