Styling of the output of the web API

edited August 15, 2019
I might be missing something fundamental here, but there seems be a huge conceptual problem with the Zotero web API.

With the web API it's possible to output your bibliography with a CSL style as formatted HTML. The problem is that the only way this can be used in an existing website is by embedding in an iframe.

But once the bibliography is inside an iframe, it's basically impossible to alter its appearance with CSS. There are javascripts to inject CSS into an iframe, but from what I've found none of them works across domains. And since the html created by the API always originates from zotero.org, there is no way to get around this restriction.

As I said, maybe I am missing something here, but after many attempts, it seems to me there is no way to influence the appearance of the API's HTML output which makes it much less useful.
  • (Better to post API questions to zotero-dev — we try to keep technical discussions there.)
    The problem is that the only way this can be used in an existing website is by embedding in a <iframe>.
    That's not correct.

    First of all, it's just an API response that gives you HTML. Any site with a server-side component can obviously make an API call and then include the HTML in the output.

    But the API also has CORS enabled, so you can even embed it client-side with JavaScript:

    <html>
    <head>
    <style>
    div {
    font-family: Garamond;
    font-size: 14pt;
    line-height: 1.5;
    }
    </style>
    </head>
    <body>
    <div id="bib"></div>
    <script>
    fetch('https://api.zotero.org/users/475425/collections/9KH9TNSJ/items/top?format=bib';)
    .then(function (response) {
    return response.text();
    })
    .then(function (body) {
    document.getElementById('bib').innerHTML = body;
    });
    </script>
    </body>
    </html>
  • Thanks for this, that was already a great help.
Sign In or Register to comment.