Html galley example

I’ve searched but cannot find an example galley html and css files.
My problem is that the CSS is not being utilised. I think the problem is the path to the CSS file. I’m certain that when I add figures I’m going to have the same problem, so I may as well ask now. I could do with some help or a pointer to example files that cover how reference CSS and images files in the html file.

My html file is
<* head>
<* meta http-equiv=Content-Type content=“text/html; charset=windows-1252”>
<* meta name=Generator content=“Microsoft Word 15 (filtered)”>
<* link rel=“stylesheet” href=“80-805-1-PB.CSS”>
<* /head>

with the * being included to dereference the html here

The CSS file is the styles generated when I made the html file from word 15. Should there be a path for the href?
What about for an image uploaded with the html file? Is there a path or is it
href=“myimage”

the CSS file starts with and is quite long so I’ll only put some here

@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:“Cambria Math”;
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:“Calibri Light”;
panose-1:2 15 3 2 2 2 4 3 2 4;}
@font-face
{font-family:Georgia;
panose-1:2 4 5 2 5 4 5 2 3 3;}
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin-top:0cm;
margin-right:0cm;
margin-bottom:6.0pt;
margin-left:0cm;
text-align:justify;
line-height:150%;
font-size:11.0pt;
font-family:“Georgia”,serif;}
h1
{mso-style-link:“Heading 1 Char”;
margin-top:12.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
text-align:center;
line-height:150%;
page-break-after:avoid;
font-size:20.0pt;
font-family:“Calibri”,sans-serif;
color:#1C45AF;}
h2
{mso-style-link:“Heading 2 Char”;
margin-top:6.0pt;
margin-right:0cm;
margin-bottom:12.0pt;
margin-left:0cm;
text-align:justify;
page-break-after:avoid;
font-size:18.0pt;
font-family:“Calibri”,sans-serif;
color:#1C45AF;
font-weight:normal;}

Hi @MarkAGregory,

Can you clarify which of our applications you’re using, and what version? (Please include this information in your posts.)

Regards,
Alec Smecher
Public Knowledge Project Team

OJS 2.4.7.1 and Microsoft Word 2016. I’ve found through trial and error that having a separate CSS does not work and having the in the header affects the whole webpage, not just the code between the and
I could do with some examples that show reasonable html / CSS - especially for tables, figures and maths.

Hi @MarkAGregory,

The problem is that OJS generates its own HTML tags, e.g…

<html ...>
 <head>
  ...
 </head>
 <body>
  ...
  (HTML document injected here)
 </body> 
</html>

…injecting your HTML document as indicated above. Your HTML document will include its own <html>, <head>, and <body> elements, leading to…

<html ...>
 <head>
  ...
 </head>
 <body>
  <html ...>
   <head>...</head>
   <body>
    ...
   </body>
  </html>
 </body>
</html>

Note the duplicated (nested) tags. This is not valid HTML and it’s up to the browser to decide what to do with it. Generally it’s been accepted by browsers without too much argument – but it’s definitely out of specification and your mileage may vary.

To address this, we’ve moved with OJS 3.x to an iframe embedding so that OJS can present its own layout around the HTML document without departing from the HTML spec.

Regards,
Alec Smecher
Public Knowledge Project Team

Hi Alec, saying that we should use OJS 3 is not a solution until OJS 3 has more features, something like 2.4.8.1. we need subscriptions, institutional accounts, etc. In the interim, are there any known solutions and examples of HTML / CSS that work with OJS 2.4.7.1 that I can look at. We need tables, figures, images, and maths equations in our html without the whole page going haywire in Chrome, etc.

Hi @MarkAGregory,

You shouldn’t need to upgrade to OJS 3.x to get this working, just explaining the broader issue and its current resolution.

If you edit your HTML galley in OJS, there’s an opportunity to upload both CSS and image files. Have you tried uploading a separate CSS file there?

Regards,
Alec Smecher
Public Knowledge Project Team

Yes, I have tried several options now. I’ve uploaded a word to html filtered file and this worked to some extent, but of course all the word styles really played havoc with the page. I also uploaded a html file with a CSS file and found the CSS is not being read. I’ve tried now about ten variations.

Are there any examples? I think an example would resolve this issue.

Hi @MarkAGregory,

See e.g. http://firstmonday.org/ojs/index.php/fm/article/view/6936/5859.

I’d suggest using a developer tool like Firebug for Firefox to inspect your page and show what CSS directives are applying to the various elements, and also checking to ensure that your external CSS is correctly referred to from your HTML.

Regards,
Alec Smecher
Public Knowledge Project Team

thank you for this hint Alec, sounds like a good place to start.
Are there any examples available of html / css files that will work with OJS 2.4.x.x? If there are not that is ok, please say so and I will stop asking.

Hi @MarkAGregory,

The example above is running OJS 2.4.x.

Regards,
Alec Smecher
Public Knowledge Project Team

What I meant to ask was access to actual html / css files that demonstrate how to do tables, figures, etc. the most common ingredients.

Hi @MarkAGregory,

I don’t have anything like that prepared, but you can pick it out of any OJS journal (that’s open access) by grabbing the innermost <html>...</html> content. Obeying any content license, of course.

Regards,
Alec Smecher
Public Knowledge Project Team

Thank you Alec, ok, so I’m going to give up on having separate CSS files and include the in my html file.
If you have a newsletter it would be great if you could ask for examples of HTML / CSS files that work with OJS 2.4.x.x to be emailed in so there is a guide for others wishing to use html. I can’t wait to move to OJS 3.1 as we need a few more features to be added to OJS 3.x before we can take the upgrade path.

Hi @MarkAGregory,

Alternately, if you can share what you’re working with here, I can perhaps spot the problem.

Regards,
Alec Smecher
Public Knowledge Project Team

I’ve put the word file, the filtered html and css files into a zip that can be found here

Hi @MarkAGregory,

Thanks – is the OJS installation with these uploaded to it available somewhere I can view it?

Regards,
Alec Smecher
Public Knowledge Project Team

The OJS is found here. It is OJS 2.4.7.1 You may need to register to see the html galley. Any problems please contact me

Hi @MarkAGregory,

Is the problematic HTML available somewhere there?

Regards,
Alec Smecher
Public Knowledge Project Team

it is available here after you login.

Found the problem :slight_smile:
Solution Part A (Part B below)
Apparently there is an issue with using tabs. Microsoft Word puts tabs as indents rather than spaces. There is an issue in PhP mime type detection for some browsers that gets mucked up somehow. I read about it in the last comment here.
I replaced all the tabs with two spaces, uploaded the file and now it is seen to be text/css and the page is being loaded with the CSS included. There are still problems with the CSS but this will be related to the other issues of the nested HTML (fixed in OJS 3.0 using iFrames)
I’m going to play with the HTML and CSS to see what I can do to make the page look ok, and hope that OJS 3.1 comes soon (with the features I need so I can upgrade)
Solution Part B (Part C below)
I’m on cpanel so I had to do two things. (1) I had to turn fileinfo on and (2) I had to comment out the mime setting path line in the OJS settings file.
;mime_database_path = /etc/magic.mime
This made a big difference to OJS finding CSS files correctly, etc.
I don’t know if my cpanel provider has the mime database setup /etc/magic.mime so I’m investigating with them at the moment. I found that it is best to remove this line unless your sure as it then falls back on fileinfo
Solution Part C
Gave up trying to get mpg theme installed, it would not load the installed plugins page after I copied these files into my OJS. I installed bootstrap3 themes instead and they worked first time. There is some sort of permissions issue with the mpg files out of the zip and no end of trying got this to work. Folders were 755 and files were 644 and still no luck, so there has to be another issue. It would be great if the mpg theme could be updated for OJS 3.02 with testing.

Overall, very happy with OJS 3.02, now it is time to rework the Journal to get the most out of one of the bootstrap3 themes.