Trying to get the typewriter effect to work with Harlowe 2

Question

I am using Twine 2.3.1 and Harlowe 2.0.1 and the code that I found back at the old forums didn't work the way I wished it did. For some reason when the passage has a border, it would run past it the padding and the border itself. Also it seems finicky, because if I put the code at the CSS at the top, it'll ruin my entire layout of my game. It'll just keep going for however long, but gets cut off at some point on the screen. Put it at the bottom seem to work, but it still causes the same problems as said above. 

Here is the code I used that I found, but don't remember or have the link to for reference:

/* This is CSS code */
.css-typing {
width: 30em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 5s steps(75, end);
animation: type 5s steps(75, end);
}
 
@keyframes type {
from { width: 0; }
 
@-webkit-keyframes type {
from { width: 0; }
}

/* This is passage code */
{(live:750ms)[<p class="css-typing">Haikyuu!!</p>(stop:)]}

Is there a more effective typewriter code out there that I don't know of?

Answer 1

It is a little hard to determine what could be causing some of the issues you describe with your layout without having ALL your CSS, and not just the CSS related to the typing effect.

One reason the typing effect could be appearing to stop early is the width of 30em you are assigning it, combine that with your overflow: hidden and the end-result could appear like the typing stops short if the text content was long enough.

eg. If the tw-story or tw-passage elements are 50em wide then the typing effect with stop at 30em which would make it appear to stop early.

Comments

OK. This is my code.

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono');

* {
}
 
html {
}
 
body, tw-story {
  	background: #ffffff;
  	font-size: 20pt;
	color: #000000;
  	font-family: 'Cutive Mono', monospace;
  	line-height: 110%;
  	word-spacing: -5px;
  	text-transform: lowercase;
}
 
b, strong {
}
 
i, em {
}

del {
}
 
code {
}
 
q {
}

p {
}
 
h1, h2, h3, h4, h5, h6 {
}
 
hr {
}
 
img {
}
 
blockquote {
}

#id {
}
 
.class {
}

.enchantment-mouseout {
}
 
.enchantment-mouseout:hover {
}
 
tw-passage {
  	border: 1px solid #000000;
  	padding: 25px 30px 25px 30px;
  	margin: 50px;
}
 
tw-link, tw-link.visited {
}
 
tw-link:hover, tw-link.visited:hover {
}
 
tw-sidebar {
}
 
tw-icon, tw-icon.undo, tw-icon.redo {
}
 
tw-include[type="startup"] {
  	display: none;
}
 
mark {	
}

.css-typing {
width: 30em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 5s steps(75, end);
animation: type 5s steps(75, end);
}
 
@keyframes type {
from { width: 0; }
 
@-webkit-keyframes type {
from { width: 0; }
}

What do you think? Any problems?

Answer 2

It'll just keep going for however long, but gets cut off at some point on the screen. 

It's supposed to.  The typewriter effect is just achieved by creating a tiny box the text can be seen through, and then increasing the size of that box--the text is always there, it's just hidden.  This is what those animated width properties do.

Crappy example:

// Brackets represent the width of the element.

[]This is sample text. // player sees nothing.

[T]his is sample text. // element widens, revealing the T

[Th]is is sample text. // etc.

The 'white-space: nowrap;' and 'overflow: hidden;' properties are critical to the success of this trick.  The overflow property controls whether the player can see text outside the element's confines (i.e. it's width).  The white-space part prevented the line from wrapping to the next when it's long.

Without overflow

[]This is some text. // even though the element's width is set so the player shouldn't be able to see it, it's visible because it overflows and is visible.  The animation does nothing at all.

Without white-space:nowrap;

[]This is a very very very very very very very very
[]very very very very very very long line. // only the width is effected by the 'typing' trick.

[T]his is a very very very very very very very very
[v]ery very very very very very long line.

[Th]is is a very very very very very very very very
[ve]ry very very very very very long line.

// etc...

In short, the problem you're having is directly caused by the effect you're generating.  You can't really have it both ways.

Is there a more effective typewriter code out there that I don't know of?

You can try typed.js, but I don't know how easy it'll be to get it running in Harlowe.  At a guess, I'd say not very.

Comments

Thank you so much for the reply. I think I understand what you mean. Thanks again. I'll look into that.