search

julianharty / testing-heuristics

Experiments to see if we can establish evidence of the value of testing heuristics
MIT License
3 stars 0 forks source link

CSS not found in generated ZIM files #8

Closed julianharty closed 7 years ago

julianharty commented 7 years ago

I've used zimwriterfs to create a baby ZIM file from the generated contents.

The CSS isn't being applied to the pages. It's expected to be at ./www/A/style.css However it isn't there. I'll try to track it down. We may need to relocate it in the generated content to enable zimwriterfs to find and put it where it expects for CSS.

julianharty commented 7 years ago

Here's the extract of the HTML code before we write it into a ZIM file. 

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Testing Heuristics</title>
    <link href='./style.css' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
  </head>

And here's the CSS file style.css

body {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  font-size: 18px;
  overflow-y: scroll;
  font-family: 'Taviraj', serif;
}
button {
  font-family: 'Taviraj', serif;
}
.header {
  background: #F2994A;
  color: #f2f2f2;
  font-size: 300%;
  text-align: center;
  margin-bottom: 20px;
}
.aka {
  color: #4F4F4F;
  text-align: center;
  font-size: 90%;
}
.hero {
  overflow-x: scroll;
  overflow-y: auto;
  padding-top: 10%;
  padding-left: 5%;
  white-space: nowrap;
}
.hero .letter {
  display: inline-block;
  text-align: center;
  color: #f2f2f2;
  font-size: 300%;
  vertical-align: top;
  width: 25%;
  margin-left: 5px;
  box-sizing: border-box;
  text-decoration: none;
}
.hero .letter span {
  box-sizing: border-box;
  padding: 0px;
  width: 100%;
  background: #BB6BD9;
  display: block;
}
.hero .letter span:nth-of-type(1) {
  padding: 20px;
  background: #F2994A;
  margin-bottom: 10px;
}
.hero .spacer {
  padding: 0;
  width: 20px;
  visibility: hidden;
  display: inline-block;
}
.body {
  padding: 10px;
  box-sizing: border-box;
  font-size: 110%;
}
.body .title {
  width: 100%;
  display: block;
  font-size: 150%;
  margin-bottom: 10px;
}
.body > div {
  margin-bottom: 10px;
}
.body .use-count {
  margin-top: 20px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
}
.body .use-count .count {
  font-size: 300%;
}
.body .use-count .message {
  font-size: 80%;
  padding: 20px;
}
.body .use-count .plus-one {
  cursor: pointer;
  background: #56CCF2;
  padding: 10px 20px;
  border: none;
  font-size: 150%;
  color: white;
}
julianharty commented 7 years ago

BTW I realise where the CSS file should end up, in the ./-/ namespace http://www.openzim.org/wiki/ZIM_file_format what I don't understand is what the preparation process is

kelson42 commented 7 years ago

The root cause of the problem is the one you describe.

The solution is just to adapt your HTML/CSS to get is working that way, typically by adding something like "../-/my.css" but it is clear that in that case, the non-zim content won't behave correctly.

A workaround is to use the zimwriterfs --uniqueNamespace option to put everything in the "A" namesapce.

This kind of problem is the main reason why I think we should change the ZIM format to remove this concept of namespaces.

ISNIT0 commented 7 years ago

Workaround implemented in https://github.com/julianharty/testing-heuristics/pull/21

We manually copy /style.css into /A/style.css

julianharty commented 7 years ago

For now this is good enough, thanks. However across the Kiwix / Openzim / ZIM projects there are some challenges to address where some implementations (still) expect the ZIM files follow an older format, the one described in the documentation. See https://github.com/kiwix/kiwix-html5/issues/230#issuecomment-300912546 for some more details.

Background context

A couple of years ago, partly to help us get the PhET simulations to work, Emmanuel either implemented or explained another approach where all the files would be put in the ./A/ namespace to enable to ZIM file to 'work' despite the complex implementation that heavily relied on JavaScript, etc. Note: there are other variatons of ZIM files with absolute links. Some implementations (including kiwix-serve and kiwix-apache rewrite those links before serving content from these ZIM files (some of the non-Wikimedia materials e.g. Wikipedia for Schools uses this internal structure).

Emmanuel has opened a ticket to investigate further changes to the ZIM file format https://github.com/openzim/libzim/issues/15

Conclusion

For now simply duplicating the CSS file is good enough, in future we may decide another approach to maximise support for this content across the many and various Kiwix client and server apps.

julianharty commented 7 years ago

I think we've fixed this, by copying the CSS file into the dist/A/ folder, see https://github.com/julianharty/testing-heuristics/pull/21 Closing this issue.