Problem styling HTML Galley OJS 3.0

Dear all (including @asmecher),

There are already some similar questions in forum, but could not get them properly and we are not sure whether they apply to OJS 3.0 as well.

We are on OJS 3.0.
This is the first time we are trying to upload HTML galley.
We have produced html file by exporting from inDesign and some modifications. It looks OK.

Problem 1: With no link to stylesheet in html file and uploading html galley and dependent css file, we only get text, not style. Should we write some link for css file in the head of html galley?

Problem 2: After uploading css file on its own (not as a dependent file of html galley) in public folder and linking it to the html galley produced the style. But would it be feasible to maintain separate css file that way when we grow bigger.
Here is the link: http://jlmc.edu.np/index.php/JLMC/article/view/57/66

Problem 3: Though we had temporarily solved the style problem as stated in problem 2, we got a blank page with the article only and no OJS structures all around. What steps exactly should we follow to wrap our html article inside OJS layout.

We have a working knowledge of of html and css.

Regards
@anupent

Hi @anupent,

Check to see that the MIME type of the CSS file was detected properly (the dependent file, that is). This is in the submission_files table. I suspect it’s been detected as text/plain, not text/css. This will cause browsers not to render it.

Regards,
Alec Smecher
Public Knowledge Project Team

Thanks @asmecher,
You were right that the css file was detected as text/plain. I corrected it to text/css.
Still, the styles were not rendered.

Don’t I have to add some codes in the section of my html galley. I would like to know that code.

Regards
@anupent

Hi @anupent,

You would simply add something like this to your HTML…

 <link rel="stylesheet" type="text/css" href="stylesheet.css">

…where stylesheet.css is the name of the CSS file (on your client machine) that you upload as a dependent file.

Note that there are a couple of relevant commits you might find helpful: one to improve MIME type detection of CSS files, and one to prevent multiple files with the same name colliding when resolving the names of dependent files. These are both included in the ojs-stable-3_0_0 branch, if you’re working with that.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like

Thanks @asmecher,
Now I am able to apply styles to html galley with the dependent css file.

The html file opens in plain window (ofcourse css style applied). Now, is there a way to to output the html file contents within the header and sidebars of OJS?

Regards
@anupent

Hi @anupent,

This has already been improved in the git repository and will be released with OJS 3.0:
https://github.com/pkp/pkp-lib/issues/1825

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like

Greetings @anupent, @asmecher,

I have already tested iframes and it has several issues, which are reported in pkp github. Internal links are not working properly (the page structure shifts up), external are not working at all. So if you declare the css and javascript in the head of html as external files they simple would not work. They not working even in case they are situated in you web access folder and you point to the like /path/to/CssOrJavascript. Iframes blocks it.
For us its far more convenient to place css and js in the web access directory and not to download them every time manually through admin panel.

Already I am running html galleys without it and can say, that iframes is simply not required if you know basics of javascript. For example you can see this article: Prevention of alcohol and other drug use using motivational interviewing among young adults in the Ukraine | Psychosomatic Medicine and General Practice
There you can see that the page is even adapted to mobile devices (requires reloading the page if you use browser on desktop to check it, it uses ajax for checking device width). It is quite simple because I begun to learn html/css/javascript only 2 month ago in a free time.
With javascript it is possible also to make in-article navigation by copying all subheadings in the another div, which will serve as a menu (working on it right now).
Another pretty thing is to adapt article for mobile devices. It is simple with jquerymobile. It need to be noted that jquery mobile need to be stopped (or page refreshed), when user leave the page via internal link. It can be done for example through autorefreshing page after user clicks on link:

    $('#idtomyahreflink').click(function() {
            window.setTimeout(function(){window.location.reload()}, 300);
    });  

Other possibility is to make with php page for each html galley on load. With its own header and footer. So article text could be injected in the body. This will be good solution for all users. But I do not know how to do it.

Hi @Vitaliy,

Would you be willing to provide a sample of the HTML etc. that you’re using?

Regards,
Alec Smecher
Public Knowledge Project Team

Greetings, @asmecher,

Yep, it is not a problem. But I cannot attach them in pm (invalid type). On our site there is html and css but without javascript.

Hi @Vitaliy,

Maybe create a .zip or .tar.gz file containing the HTML and CSS?

Regards,
Alec Smecher
Public Knowledge Project Team

Greetings @asmecher,

Sorry, but I cannot upload archives through forum either. I have uploaded files on github.
You can see them here:

Also they available on github pages here:
https://vitaliy-1.github.io/frontendSample/

There is a sample HTML file with css and some javascript code, which autogenerates navigational menu.

1 Like

Hej Vitaliy,

Thanks for your openness to share this sample!

Regards
Tobias

Hi @twa,

We use xslt transformation to achieve exact the same html structure like in the example.

  1. First we transform doc or docx into xml with the PKP Open Typesetting Stack http://pkp-udev.lib.sfu.ca/

  2. Than we adopt generated xml to eLens Viewer standards. It takes near 2 hours.

  3. The last thing is transformation of this xml to html with JATS stylesheets. The all project is here: GitHub - ncbi/JATSPreviewStylesheets: JATS Preview Stylesheets. It requires some sort of xslt processor. We use Oxygen, which in turn use Saxon processor. But there is a non-commercial programs in the internet. First there is a need to parse a reference list with one of this xsl stylesheets: JATSPreviewStylesheets/xslt/citations-prep at master · ncbi/JATSPreviewStylesheets · GitHub. Than parse the result document with jats-html stylesheet: JATSPreviewStylesheets/xslt/main at master · ncbi/JATSPreviewStylesheets · GitHub

All manipulations will take near 3 hours. As a result you will have JATS xml, that can be viewed by eLens viewer and html, that will be indexed in google scholar (because xml is not).

For now we work with our own xslt for transformation xml to html, because the one on github is not ideal.

1 Like

Hi Vitaliy,

you’re talking about 3 hours per article – right? That meets my time estimation for this task.

One further question: Is it possible to only upload the article.css and jquery.js once to the webserver and reference to them in the HTML galley? I tried, but it didn’t work …
If this will not work: How do you upload multiple files (HTML, CSS, JS) as a HTML galley to OJS? I haven’t managed this either.

Thanks!
Tobias

Greetings @twa,

3 hours per article if tables are well formed and at the end of each reference in the reference list there is a full doi index or pubmed reference of cited article (In this case parser will include cited article`s data from reference). Open Typesettings Stack has own limits, but it can help to form JATS XML much faster, than it can be done manually.

Css can be uploaded through admin panel after html. But you need manually change mime type of uploaded css from “text” to “css” in database.

I really did not try to place css or js in the web access directory and point out path to them in the head of the html without iframe. You say it is not working? Hmm.
But even in this case I already tried to add javascript code and path to css through .tpl file in the lens plugin and it worked. This can be done and for hmtl galley plugin.
@asmecher maybe you now the answer to this problem?

Nevertheless, I will try that on this weekend.

Forgot to tell,

One posibillity of why external links are not working is because of iframe, as I wrote earlier. But that is if you adopted it from github before official release of new ojs version.

Hi @Vitaliy,

I uploaded those files to an HTML galley and opened it via the reader interface and voila – it works! I clicked a few links (e.g. internal links to anchors, and an external link) and they seemed to behave as I would expect. Can you clarify what kinds of links were giving you trouble?

Incidentally, this looks really good – excellent work! When do you plan to launch? This would be a good journal to feature e.g. via a PKP blog post.

Regards,
Alec Smecher
Public Knowledge Project Team

Hi @asmecher, Thanks :slight_smile:

You done this with iframe or without?

I have just checked, one of our articles was already published with external link to javascript in the <head>. The problems occurred only when we adopted iframe. When I clicked on the link in nav menu all frame went up, so the I frame menu had become inaccessible (beyond the page). Also external links to css (or js) were not working. CSS worked only when was uploaded through admin dashboard.
We are planning to launch in midwinter. There are some bureaucratic borders in our country for establishing scientific journal, especially electronic, but it seems we are successfully passing them. We are also planning to inject more functionality in our html version of galleys in the future (taking front-end development courses in free time right now) and there will be no problem to share some of codes with community.

for @twa,

You can simply create own folder in the root of web access folder and copy there all needed css and js files. Than just add links in the html head to it, for example:
<link rel="stylesheet" type="text/css" href="/path/to/directory/mycss.css
<script type="text/javascript" src="/path/to/directory/myjavascript.js"</script>
If it is javascript that requires to be loaded after html, than add “defer” attribute. Do not forget to set permissions accordingly.

1 Like

Hi Vitaliy,

thanks, it works with absolute path values.

Best wishes
Tobias

@Vitaliy, @asmecher,

wouldn’t it be possible and nicer not to use <iframe>s for HTML, but to inject OJS code into the HTML files? E.g. directly after <body> and into <head> before all manual <link> or <style> sections? This would allow much more flexibility and would avoid the <iframe>.

Regards
Tobias