It looks like you're new here. If you want to get involved, click one of these buttons!
/*! typed.js integration module for Harlowe */ !function(){"use strict";var getInlineOptions=function(name){var match,options={},typedRe=/^typed(?:-(\w+))+\b$/,parseRe=/-(speed|delay)(\d+)\b/g;if("typed"!==name&&typedRe.test(name))for(;null!==(match=parseRe.exec(name));)switch(match[1]){case"speed":options.typeSpeed=+match[2];break;case"delay":options.startDelay=+match[2]}return options},typedCallbackFactory=function(el,callback){return function(){var $outer=jQuery(el),$inner=jQuery('<div class="typedjs-text-wrapper" style="display:block;position:absolute;left:0;top:0;"><span class="typed"></span></div>'),$source=$outer.children('tw-hook[name|="typed"]'),options=jQuery.extend({typeSpeed:40,startDelay:400},getInlineOptions($source.attr("name")),{strings:[$source.html()]});"function"==typeof callback&&(options.callback=callback),$outer.append($inner),$inner.children().typed(options)}};window.startTypedModule=function(){jQuery('tw-hook[name|="typed"]').addClass("typed").css("visibility","hidden").wrap('<div class="typedjs-outer-wrapper" style="display:block;position:relative;"></div>');for(var $elements=jQuery("tw-passage .typedjs-outer-wrapper"),callback=null,i=$elements.length-1;i>=0;--i)callback=typedCallbackFactory($elements[i],callback);"function"==typeof callback&&callback()}}();
style="display:inline-block;position:absolute;left:0;"and this
style="display:inline"respectively, and while the typing text now displays inline, it wraps to the next line way too early and moves half the line to the one below mid way through.
Comments
Do the following changes to the typed.js integration module for Harlowe code.
1. The styling of typedjs-outer-wrapper classed element:
Change it's display property from block to inline.
2. The styling of typedjs-text-wrapper classed element:
Replace all of it's existing styling with only display:inline;
3. The CSS added to the tw-hook[name|="typed"] jQuery element:
Replace the css("visibility","hidden") with css("display","none"), the reason for doing this is that an invisible element still takes up layout space and this results in the typed text appearing below that black space.
Thanks for helping with this, but I've still got the same issue. Inline text wraps much too early and only displays in a small column. I have attached an example twine to show what I mean
(You also removed the position:relative; property from the styling of typedjs-outer-wrapper classed element, which step 1 did not ask you to do but that is not that important.)
If this topic is a Discussion then you can't.