Upgrade StorageStyling of the output of the web API
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.
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.
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>