# CSL previewing on Zotero styles page

**URL:** <https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467>\
**Category:** CSL Development\
**Created:** [April 29, 2008, 12:15am UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467 "2008-04-29T00:15:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan\_Stillman](https://avatars.discourse-cdn.com/v4/letter/d/ecb155/32.png) [@Dan\_Stillman](https://discourse.citationstyles.org/u/Dan_Stillman)\
**Post date:** [April 29, 2008, 12:15am UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467/1 "2008-04-29T00:15:05Z")

</div>

I’ve added a preview pane to the Zotero styles page:

[http://www.zotero.org/styles](http://www.zotero.org/styles)

The previews are processed by a copy of Zotero running on one of our  
servers (in a JSSh-enabled build of Firefox  
[http://www.croczilla.com/jssh](http://www.croczilla.com/jssh)) and should be generated automatically  
whenever a style is committed (though I haven’t actually tested that  
part). While this setup isn’t exactly an ideal long-term solution, it  
should get the job done until Zotero’s JavaScript citation processor is  
abstracted from the rest of the code. (We could also use one of the  
other CiteProc implementations once they’re brought up-to-date, but  
using the same processor that’s used in Zotero has some obvious advantages.)

It’s currently using the test data that Bruce checked into the Xbib SVN  
recently. I’d be happy to add additional data.

Note that the preview pane uses the white-space: pre-wrap CSS value,  
which is only supported in recent browsers (e.g., Firefox 3).

This was mostly just a proof-of-concept, so let me know if there are any  
other tweaks that would be helpful.

- Dan

---

<div class="post-metadata">

**Author:** ![Bruce\_D\_Arcus1](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@Bruce\_D\_Arcus1](https://discourse.citationstyles.org/u/Bruce_D_Arcus1)\
**Post date:** [April 29, 2008, 12:58am UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467/2 "2008-04-29T00:58:26Z")

</div>

Cool! A few comments:

1. the test/preview data obviously has room for improvement, and  
people should add to it as they like

2. related, ideally, previewing would be conditioned in part on the  
fields. For example, legal styles would need to have different legal  
types, while science people are concerned with papers in proceedings.  
Previews should reflect that.

3. I’m not so sure the current preview UI quite works. The preview  
itself is clipped on my (fairly large) screen. What about more of a  
Netflix-style pop-up? Maybe Jon L. has some ideas on that.

4. there are some errors in the styles that mean the previews don’t work

Bruce

---

<div class="post-metadata">

**Author:** ![Bruce\_D\_Arcus1](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@Bruce\_D\_Arcus1](https://discourse.citationstyles.org/u/Bruce_D_Arcus1)\
**Post date:** [May 1, 2008, 2:12pm UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467/3 "2008-05-01T14:12:49Z")

</div>

Quick followup …On Mon, Apr 28, 2008 at 8:58 PM, Bruce D’Arcus \<@Bruce\_D\_Arcus1\> wrote:

> 1. I’m not so sure the current preview UI quite works. The preview  
> itself is clipped on my (fairly large) screen. What about more of a  
> Netflix-style pop-up? Maybe Jon L. has some ideas on that.

An easy temporary fix for this would be to give the stylePreview div a  
height of 50% (though this is in general still a real estate  
inefficient approach).

Bruce

---

<div class="post-metadata">

**Author:** ![Jerome\_Ron](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@Jerome\_Ron](https://discourse.citationstyles.org/u/Jerome_Ron)\
**Post date:** [May 1, 2008, 2:43pm UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467/4 "2008-05-01T14:43:57Z")

</div>

Another solution might be to use a combination of jQuery and the  
Hovertips code found here… [http://www.dave-cohen.com/node/1186](http://www.dave-cohen.com/node/1186)

This will produce a popup, in which could render your preview, when the  
user hovers over the style link.

Ron.\> -----Original Message-----

> From: [xbiblio-devel-bounces@lists.sourceforge.net](mailto:xbiblio-devel-bounces@lists.sourceforge.net) [mailto:xbiblio-  
> [devel-bounces@lists.sourceforge.net](mailto:devel-bounces@lists.sourceforge.net)] On Behalf Of Bruce D’Arcus  
> Sent: May 1, 2008 10:13 AM  
> To: development discussion for xbiblio  
> Subject: Re: [xbiblio-devel] CSL previewing on Zotero styles page
> 
> Quick followup …
> 
> On Mon, Apr 28, 2008 at 8:58 PM, Bruce D’Arcus \<@Bruce\_D\_Arcus1\> \> wrote:
> 
> > 1. I’m not so sure the current preview UI quite works. The preview  
> > itself is clipped on my (fairly large) screen. What about more of a  
> > Netflix-style pop-up? Maybe Jon L. has some ideas on that.
> 
> An easy temporary fix for this would be to give the stylePreview div a  
> height of 50% (though this is in general still a real estate  
> inefficient approach).
> 
> Bruce

* * *

> –  
> This [SF.net](http://SF.net) email is sponsored by the 2008 JavaOne(SM) Conference  
> Don’t miss this year’s exciting event. There’s still time to save  
> $100.  
> Use priority code J8TL2D2.

[http://ad.doubleclick.net/clk;198757673;13503038;p?http://java.sun.com/](http://ad.doubleclick.net/clk;198757673;13503038;p?http://java.sun.com/)

---

<div class="post-metadata">

**Author:** ![Bruce\_D\_Arcus1](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@Bruce\_D\_Arcus1](https://discourse.citationstyles.org/u/Bruce_D_Arcus1)\
**Post date:** [May 1, 2008, 2:47pm UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467/5 "2008-05-01T14:47:42Z")

</div>

Yes, this is what I was originally meaning by the Netflix-style pop-ups.

Bruce

---

<div class="post-metadata">

**Author:** ![Bruce\_D\_Arcus1](https://avatars.discourse-cdn.com/v4/letter/b/4bbf92/32.png) [@Bruce\_D\_Arcus1](https://discourse.citationstyles.org/u/Bruce_D_Arcus1)\
**Post date:** [May 1, 2008, 2:50pm UTC](https://discourse.citationstyles.org/t/csl-previewing-on-zotero-styles-page/467/6 "2008-05-01T14:50:26Z")

</div>

BTW, here’s another one:

[http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/](http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/)

Bruce