I tried to do this in the <body> of the web page that Twine 2 compiles to but it appeared with a linebreak at the first of my two word title making it appear on two lines and forced to the left margin. I was using standard html tags and inline style. <h2> tags worked. that was all
Thanks,
Paul
Comments
This is the standard way to center an <h1>:
Copy and pasted from a game so I know it works.
You don't need to edit the HTML file; you can put that code right into a Harlowe passage.
Here is a link for styling <h1> to <h6> HTML tags: http://www.w3schools.com/tags/tag_hn.asp
Most browsers will display the <h1> element with the following default values:
I don't know how Harlowe's default CSS styles <h1>'s, but you can mess with that to change it to whatever you'd like.
Alternatively you can simply use an image for the title, since images overflow the page margins and are not cut off.
Might try this:
This is one of the reason why wider h1 elements would be wrapping, although @Sharpe's suggestion will stop the wrapping from occurring it may also cause your page to now have a vertical scroll bar.
So that's why I chose to put the title in the html file, rather than the start passage. If that will work, fine, I'll do it. I guess I could just copy and paste Twines whole html file inside one of my own. Whatever will do the trick I say!
Sharpe's post confuses me. Where would that snippet go? It's not valid JS and has curley braces. In the first passage maybe?
OK I just put the Title in the main Passage using <center><h1>This is the Title</h1></center> and it worked fine, no wrapping.
The solutions are still appropriate for what you want to do. Your issue is that the default Twine passage area is not large enough to display the size of the title you want. Please note that Twine is not designed around "most websites", so if you want 900px, you will need to specify it yourself.
Twine is just HTML and CSS anyway. You can place HTML in the passages.
Maybe try css like:
Then write the <h1> title in the starting passage.
Note I'm not a Harlowe user so not sure if I have that css element correct.
Alternatively, if you are able to host images, what I mentioned about the use of images still holds up. Images are not clipped by elements, so you can just reference a title image of your text at the top of your start passage and it will ignore passage width constraints.
Click on the name of your story in the bottom left corner of the Story Editor and select the Edit Story Stylesheet option, then paste in the following CSS: ... that will make Harlowe's main HTML element tw-story the width you want.
All of the other HTML element's generated by the Harlowe engine will be created within the tw-story element, these include tw-passage, tw-sidebar, and any HTML elements contained within your story's passages.