Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Altering side margins and justifying text in Responsive

Hi there. I'm working on an interactive prose poem, and I want the prose to be a text block, so justified, I guess is the word. I'd also like to bring the right hand margin in a little bit, too, so that the lines are shorter and wrap sooner, making prose chunks about four inches wide but without any top or bottom margins. As is probably very obvious, I know lots of nothing about HTML and CSS, and am just starting to learn, but I'd really like to move this project forward. Help is appreciated!

Comments

  • The area where your Passage contents appears is made up of two parts, an outer part and an inner part, the inner part is confined within the outer part.

    The outer part defines the total width of the usable area and also centers that area automatically, the related CSS is as follows:
    .wrapper {
    	width: 864px;
    	margin: 0px auto;
    }
    

    The inner part, in which the actual Passage content is displayed, defines how much of the outer part can be used by the Passage contents, the inner part's width must not exceed that of the outer part.
    The related CSS is as follows:
    #passages {
    	width: 640px;
    }
    

    I would suggest playing around with the widths of the outer and inner parts until it looks the way you want.

    note: People have their screens set to different resolutions, this in turn changes how many pixels (dots) there are to an inch (DPI), so it is very hard to make something appear an exact number of inches wide. This is why something that may appear to take up a small area in the middle the screen for one person could fill most of the screen for another.
  • Thanks! I will mess around with this and see what shakes out. Cheers!
  • greyelf wrote: »
    The area where your Passage contents appears is made up of two parts, an outer part and an inner part, the inner part is confined within the outer part.

    The outer part defines the total width of the usable area and also centers that area automatically, the related CSS is as follows:
    .wrapper {
    	width: 864px;
    	margin: 0px auto;
    }
    

    The inner part, in which the actual Passage content is displayed, defines how much of the outer part can be used by the Passage contents, the inner part's width must not exceed that of the outer part.
    The related CSS is as follows:
    #passages {
    	width: 640px;
    }
    

    I would suggest playing around with the widths of the outer and inner parts until it looks the way you want.

    note: People have their screens set to different resolutions, this in turn changes how many pixels (dots) there are to an inch (DPI), so it is very hard to make something appear an exact number of inches wide. This is why something that may appear to take up a small area in the middle the screen for one person could fill most of the screen for another.

    I don't understand. Do you copy both parts and mess around with them? In my story, I have an image which is on the left and makes it hard to read the text, so how would I make the text go to the left more?

  • Deadshot wrote: »
    I don't understand.
    This topic was about the Twine 1 Responsive story format, the solution will not help you with Twine 2's Harlowe. If you need help with Harlowe you should create your own Question.
Sign In or Register to comment.