Giter Site home page Giter Site logo

marcelriedel / jatsinform Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 40.22 MB

JatSinForm is a light-weight js-application used for a browser-based pdf-production of scholarly articles, formatted in (NISO)-JATS-XML standard.

HTML 0.27% CSS 10.21% JavaScript 89.52%
jats jats-publishing jats-xml journal-article paged-js paged-media pagedjs pdf-generation print-css publishing-workflow typesetting

jatsinform's Introduction

JatSinForm

JatSinForm is a light-weight js-application used for a browser-based pdf-production of scholarly articles, formatted in (NISO)-JATS-XML standard.

The core functionalities of JatSinForm (=> renderAsPDF.js) are primarily based on pagedJs, developed and maintained by Coko Foundation. pagedJs displays paginated content in the browser and generate print books (and articles) using web technologies (JS and CSS Paged Media Module).

JatSinForm converts each jats-xml, given as source document, to html and transforms it into the desired document model (e.g. with cover-page, abstract-sections, imprint). The figures, referenced in the source xml via figure references ("fig-ref") are typeset automatically by default-sets. JatSinForm also offers several editing functions usable during the pagedJs-preview for customizing the layout of each image (scaling, switching typesetting classes, resizing) by keyboard-shortcuts and on-click-features (using interactJs).

Currently JatSinForm is tailored (article-design, css-styles, typesetting classes, assets) to the highly standardized journals published by the German Archaeological Institute. But, it might be - at least partly - adaptable to other journal (or book) designs.

The html-views (=>renderAsViewer.js) are not fully implemented yet. The JATS-XML documents (of the German Archaeological Institute) are created by independant tool chains (e.g. TagToolWizard and/or InDesign-workflows).

Prerequisites

  • You need a browser (tested with Chrome and Firefox only)
  • You need an IDE (e.g. Visual Studio Code) or other server-solutions to run the js-application scripts (cors-policy-friendly) locally in your web-browser.

Getting Started

  • /xml-documents: deposit xml-files and its related images in this folder (analogue to "example.xml")

  • index.html:

    • reference xml-file in meta-tag:
      • <meta name="--xml-file" content="example.xml">
    • reference main.js in document head:
      • <script src="src/js/main.js" type="application/javascript"></script>
    • open/serve/preview index.html in your prefered browser
      • using your IDE as local webserver
      • installing "Live Preview"-Extension recommended

Control views and editing functions in pagedJs-preview

The keyboard-control keys are defined in index.html. By default use:

Key Action Const in index.html
r reload reload
q hardReset hardReset
p render xml with pagedJs renderAsPDF
v render xml in a web-view renderAsViewer
f highlight figure references highlightFigReference
h highlight page contexts info highlightContextInfo
o show page overflows (of text) showOverflows
t push figure to top of page (+ mouse over figure) figureToTop
* dev-only: setup figure constellations setupFigConstellations

The mouse-click-events are defined as follows:

  • click (on figure) => switch width-class of floating figures
  • double-click (on figure) => switch typesetting-class of figure
  • on-hold-click (on figure) => switch display-mode of figCaption (bottom or regular)

Libraries

  • pagedJs
  • interactJs
  • qrCodeJs
  • highlightJs

Configurations

/configs:

  • figConstellations.json
  • journals.json
  • tagConversionMap.json
  • toggleFigureClasses.json

jatsinform's People

Contributors

marcelriedel avatar

Stargazers

Lisa Steinmann avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.