+1 vote
by (170 points)
Hi everybody

I'm currently working on a game (Twine 2, Harlowe)where background looks like an open page from the book. I would love to put text that appears to go in two columns, each part on each page. Is it possible to do it? I googled it but I'm not very familiar with CSS and I'm having troubles implementing solutions I found online, especially on the old Twine forum.

Regards!

1 Answer

0 votes
by (8.9k points)

Here's a very simple way to do it – but be aware that it doesn't work in IE9 or earlier.

1).  Choose "Edit Story Stylesheet" and paste this into your CSS file.

.twocolumn {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

 

2).  In any passage that you want to display as two columns, enclose the text in the tags <div class="twocolumn"> and </div>, like so:

<div class="twocolumn">
In the beginning God created the heaven and the earth.

And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters.

And God said, Let there be light: and there was light.

And God saw the light, that it was good: and God divided the light from the darkness.the light from…: Heb. between the light and between the darkness

And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.And the evening…: Heb. And the evening was, and the morning was etc.

And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.firmament: Heb. expansion

And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so.

And God called the firmament Heaven. And the evening and the morning were the second day.And the evening…: Heb. And the evening was, and the morning was etc.

And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so.

And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good.

And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so.grass: Heb. tender grass

And the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good.

And the evening and the morning were the third day.And the evening…: Heb. And the evening was, and the morning was etc.

And God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years:the day…: Heb. between the day and between the night

And let them be for lights in the firmament of the heaven to give light upon the earth: and it was so.

And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also.to rule the day…: Heb. for the rule of the day, etc.

And God set them in the firmament of the heaven to give light upon the earth,

And to rule over the day and over the night, and to divide the light from the darkness: and God saw that it was good.

And the evening and the morning were the fourth day.And the evening…: Heb. And the evening was, and the morning was etc.

And God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven.moving: or, creepinglife: Heb. soulfowl…: Heb. let fowl flyopen…: Heb. face of the firmament of heaven

And God created great whales, and every living creature that moveth, which the waters brought forth abundantly, after their kind, and every winged fowl after his kind: and God saw that it was good.

And God blessed them, saying, Be fruitful, and multiply, and fill the waters in the seas, and let fowl multiply in the earth.

And the evening and the morning were the fifth day.And the evening…: Heb. And the evening was, and the morning was etc.

And God said, Let the earth bring forth the living creature after his kind, cattle, and creeping thing, and beast of the earth after his kind: and it was so.

And God made the beast of the earth after his kind, and cattle after their kind, and every thing that creepeth upon the earth after his kind: and God saw that it was good.

And God said, Let us make man in our image, after our likeness: and let them have dominion over the fish of the sea, and over the fowl of the air, and over the cattle, and over all the earth, and over every creeping thing that creepeth upon the earth.

So God created man in his own image, in the image of God created he him; male and female created he them.

And God blessed them, and God said unto them, Be fruitful, and multiply, and replenish the earth, and subdue it: and have dominion over the fish of the sea, and over the fowl of the air, and over every living thing that moveth upon the earth.moveth: Heb. creepeth

And God said, Behold, I have given you every herb bearing seed, which is upon the face of all the earth, and every tree, in the which is the fruit of a tree yielding seed; to you it shall be for meat.bearing…: Heb. seeding seedyielding…: Heb. seeding seed

And to every beast of the earth, and to every fowl of the air, and to every thing that creepeth upon the earth, wherein there is life, I have given every green herb for meat: and it was so.life: Heb. a living soul

And God saw every thing that he had made, and, behold, it was very good. And the evening and the morning were the sixth day.
</div>

 

by (159k points)

@Charlie

When looking for neutral text to use as a filler in an example I suggest using Lorem Ipsum, which has been used as a industry's standard dummy text for a very long time.

by (8.9k points)
Given that the OP is a coding rookie, I thought that filling the <div> with gobbledygook might confuse him.  :-)
by (170 points)
Thank you for the answer, and no problem with using text other then Lorem Ipsum, I understood it completely ;). I have another question - is it possible to make two passages appear in one passage, in two differen columns, using your method or something similar?
by (159k points)
There are those that have problems with people quoting (or misquoting) religious scripture or political expressions, so I suggested using neutral text (written in a language that few fully understand these days) in the example (that needed a long piece of text to demonstrate the wrapping principle) as there is no way of knowing who else will read this Q/A at some later time.
by (8.9k points)

badtaste, when you say you want two  passages to appear in one passage, do you mean two separate Twine passages?  If so, I'm afraid that's a bit above my skill level – I'm still a novice Twine user (but maybe someone else can help if you ask that in a new question).

However, if you mean that you just want two separate columns of text or graphics (instead of one long column that breaks itself into two, as in the first solution I proposed), here's some code that will do that.

First, choose "Edit Story Stylesheet" and paste this into your CSS file.

.leftcolumn {
	float: left;
  	width: 400px;
  	margin-right: 50px;
}

.rightcolumn {
 	margin-left: 450px; 
}

Note that you can change the column widths by experimenting with these numbers.

Now in the passage, encase your code in the relevant divs, like so:

<div class="leftcolumn">
In principio creavit Deus caelum et terram.
Terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas.
Dixitque Deus fiat lux et facta est lux.
Et vidit Deus lucem quod esset bona et divisit lucem ac tenebras.
Appellavitque lucem diem et tenebras noctem factumque est vespere et mane dies unus.
</div><div class="rightcolumn">
Dixit quoque Deus fiat firmamentum in medio aquarum et dividat aquas ab aquis.
Et fecit Deus firmamentum divisitque aquas quae erant sub firmamento ab his quae erant super firmamentum et factum est ita.
Vocavitque Deus firmamentum caelum et factum est vespere et mane dies secundus.
</div>

That should create the effect you want (if I've understood your desired outcome correctly).

by (8.9k points)

greyelf, while I do see the point you're making: I think it will be a pretty sad day for humankind when the only text we dare post publicly is Lorem Ipsum, for fear of some future idiot declaring offence.  Speaking as a long-confirmed atheist, The Bible is one of humanity's most influential documents, and if somebody were truly offended at seeing a few words of it printed in a coding forum, I'd suspect they were profoundly maladjusted.

My first instinct was indeed to paste in Lorem Ipsum, but I thought that might be confusing (and needlessly boring to read).  So I copied and pasted a bit of Genesis instead.  I could just as easily have grabbed "The Hobbit" or "Huck Finn" instead...but who's to say that some lunatic somewhere wouldn't take offence at the former (because it contains magic!) or the latter (because it contains racist words!)?  The logical endpoint of accommodating this control over which ideas can or cannot be expressed is Newspeak, and I think that would be doubleplusungood.

I believe that your suggestion was made in good faith, but it disturbed me.  On reflection, I think I understand why.  Any later person who claims to be offended by seeing those words is flat out lying in order to reduce the ideas that you or I may express, and they can kiss my ass.

</rant>

by (170 points)
@Charlie

This worked like a charm!

Many thanks, may your stories last a thousand years... ;)
by (8.9k points)

You're welcome, buddy!  I just did a quick test, and replacing the numbers with % values works better (because the content scales to fit the browser window).  The CSS should look like this:

.leftcolumn {
	float: left;
  	width: 40%;
  	margin-right: 20%;
}

.rightcolumn {
 	margin-left: 60%; 
}

 

...