+1 vote
by (520 points)

In my Harlowe 2.0.1 test (and I use Twine 2.1.3), switching from a passage to another is rather long, 1 or 2 seconds. Also, the side bar is first shown on center screen, small vertical size, and it needs that time to be moved to the left and resized.

Here is my CSS stylesheet:

body { 
  	background-color: darkcyan;
}

tw-story {
	width: 1024px;
	background-color: darkcyan;
  	position: absolute;
  	font-family: verdana;
  	font-size: 16px;
}

tw-passage {
  	position: absolute;
  	top: 0%;
  	height: 100%;
	width: 774px;
  	left: 0px;
	margin-left: 250px;
  	margin-right: 0px;
  	padding-top: 10px;
  	padding-left: 15px;
  	padding-right: 10px;
}

tw-passage tw-include[title="SideBar"] {
	width: 250px;
	position: absolute;
	top: 0%;
  	height: 100%;
	left: -250px;
	padding: 5px;
	text-overflow: clip;
  	background-color: black;
}

tw-link { color: cyan; }

tw-sidebar { display: none; }

Any way to improve that ?

Thanks in advance.

5 Answers

0 votes
by (159k points)

Without examples of the content you are trying to show within the main passage and your SideBar passage it is difficult comment on what may be causing the HTML generated by those passage to render slowly.

In regards to your CSS example there are a number of potential issues with it:

a. You are giving the tw-story element a set width but not removing it's existing left & right padding of 20%, this means its internal display area may be smaller you think it is. It's exact internal display width depends on the width of the End-user's web-browser's view-port.

b. Your tw-passage element is bigger (both height & width) than the tw-story element it is a child of, your usage of a position of absolute is helping to compensate for this fact.

c. The usage of position: absolute; maybe effecting the method Harlowse uses to transition between passages. As I understand it position: absolute removes the related elements out of the standard process flow of rendering the DOM structure, thus causing them to be rendered later in that flow than their nodes appear in the DOM tree.

I suggest you supply examples of the content of the Passage(s) that render slow and a image mock-up of how you would like your custom layout to look, that way people maybe able to give you some advice on how to achieve it without slowing down the rendering. It would also help to know which web-browser's (brand and version) and which operating system (brand and version) you were testing on.

by (520 points)
edited by
Thanks, greyelf! Will do. But one ridiculous question :-( first: how do I attach a file to my answer? I can do that in many forums, but apparently not in this one. At least, I can't see how to ask the question.

I must be dumb, but this is not obvious to me. Also, I see that I can specify a link to something. Fine, no doubt, but how I do I do that?
by (159k points)
Unfortunately this is not a forum, and as far as I can tell (using google) the software running this site does not support file attachments.

I suggest you upload your file(s) to a file hosting site (like MEGA, GDrive, etc...), and then post a link to the uploaded file(s) here.
0 votes
by (520 points)

Hello, greyelf!

I can offer this link to a Twine archive that contains all, I think. A nuisance having to go through that kind of sites, but as it can't be avoided...

http://www.filehosting.org/file/details/681399/Harlowe%20CSS%20Twine%20Archive.html

The texts are in French but that's irrelevant, I suppose. The final screen image is simple and trivial, but it's what I want.

One thing, though:

In the SideBar passage, that code

(set: _st to "`Vos points : `"  + (text: $player's "hitPoints"))
(align: "=><=") [_st]

should, I think, display as "Vos points : 100" centered in the line, but it doesn't; there's an unwanted line break between "Vos points : " and the output of the text: macro. Yet, as far as I can see, this isn't a passage width problem.

Thanks for your help :-)

 

by (159k points)
thierry_saint_malo,

The file hosting site you have chosen to use requires me to supply personal details before it will allow me to download your file from it, which I am unwilling to do.
Could you please choose a file hosting site that doesn't have that requirement.
0 votes
by (520 points)
Here you are, greyelf. I should have thought of that more quickly, but...

Please go to my site www.tvi-sarl.com. As far as I know, there are no viruses.

This is a bi-lingual site. So, click on the anglo-american flag icon at top.

Click on the "Downloads" link in the left green frame.

In the "Downloads" section, you'll find a link to download a .zip that contains my small archive.

Thanks for your help.
+1 vote
by (159k points)

WARNING: A more experienced CSS writer may notice mistakes or web-browser incompatibilities with my CSS examples, if so you should take their advice over mine.

I had a look at your project and noticed a number of issues with how you were doing some things:

1. You are using Collapsing whitespace markup to reduce any visual output generated by your startup related passages, it is better to use a targeted CSS display: none; instead.

2. I assume the undefined variables ($dague, $bouclier, $fists, $feet, $trident, and $filet) in your startup were just left out of the example, based on their usage it appears that they may contain object references (datamaps?) of some sort. Due to the way the story format's History and Object property updating systems work the object references within the arrays will (quickly) not reference the same objects as the previously mentioned variables do.

3. The (align:) macro you are using generates the following HTML which sets a max-width of 50% on it's contents, this is why your "Vos points : 100" was on two lines.

<tw-hook style="text-align: center; max-width: 50%; margin-left: auto; margin-right: auto; display: block;"></tw-hook>

4. Due to how the Harlowe passage transition visual effect is implemented having HTML (like the hr element) within Passage content can cause some text to appear instantly, in the case of the hr element I would suggest using a named hook combined with targeted CSS to achieve the same result.

The following examples try to solve the above issues as well as your original issues.

a. The StoryInit and Monsters passages.
Remove the open and close curly braces.

b. The Start passage.
Replace the line(s) displaying the game into (name & version) and the hr element with the following.

|game>[Gladiateur `** Version 2.0.24 **`]\

c. The SideBar passage.
Replace the current content with the following.

|title>[Gladiateur]
|points>[(print: "Vos points : "  + (text: $player's "hitPoints"))]

d. The CSS within the Story Stylesheet area.
Replace the current content with the following.

body {
	background-color: darkcyan;
}
tw-story {
	width: 1024px;
	margin-left: 250px;
	background-color: darkcyan;
	font-family: "verdana";
	font-size: 16px;
	/* Reset/Override Harlowe defaults. */
	display: flex;
	-webkit-box-direction: normal;
	-webkit-box-orient: inline-axis;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	box-sizing: content-box;
	padding: 0;
}
tw-passage {
	min-height: 100%;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 15px;
}
tw-sidebar {
	display: none;
}
tw-link {
	color: cyan;
}

tw-include[type="startup"] {
	display: none;
}
tw-passage tw-hook[name="game"] {
	display: block;
	padding-bottom: 0.75em;
	border-bottom-style: inset;
	border-bottom-width: 2px;
	margin-bottom: 1em;
}
tw-include[title="SideBar"] {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	background-color: black;
	text-align: center;
	text-overflow: clip;
}
tw-include[title="SideBar"] tw-hook[name="title"] {
	display: block;
	font-size: 2.1em;
	font-weight: bold;
	margin-top: 15px;
}

 

0 votes
by (520 points)
edited by

Many thanks, greyelf! You've been very helpful.

One thing, though: in the Start passage, the text desn't wrap naturally inside the passage box, and I have to insert explicit line breaks by hand. For instance, I must insert a line break between "grand" and "<i>velum</i>" when Twine's window isn't maximized.

Is this a normal situation ?

by (159k points)

the text desn't wrap naturally inside the passage box

If you are asking why doesn't the displayed passage text dynamically (re)wrap when you manually adjust the width of the web-browser's view-port while Playing the game.
Then the reason is that you set static widths (eg. 1024px & 774px) for the tw-story & tw-passage elements in your original example, so I transferred the tw-story element's static width to my example when I tried to reproduce your layout.

...