›

Howdy, Stranger!

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

Sign In Register

Categories

Fixed width and word warp for specific lines in a passage?

EdjeEdje
in Help! with 1.x
I'm trying to figure out how to create elements in a passage that have fixed width

I'm not that familar with css and I've hit a bit of a brick wall in terms of translating what i'm finding to both twine's inline and passage tag implementation.

I'm trying to display two long sentences together in adjacent small cells. I there any way to do this?

Comments

  • SharpeSharpe
    I'll try to remember to answer you when I get a chance, but a .TWS (Twine story file) showing what you've done so that we can be certain to understand what you want will help.
  • EdjeEdje
    here is an example of what isnt working
  • SharpeSharpe
    Edje wrote:
    I'm trying to figure out how to create elements in a passage that have fixed width


    First of all, I don't recommend that in-line CSS stuff. I'd just do things the good old fashioned way, with a stylesheet, as you're trying to do.

    For the word-warp word put this in a passage with the tag "stylesheet" without the quotes.
    .wrap {
    word-wrap: break-word;
    }
    The ".wrap" is a class name. It can be anything. It could be ".stupidface" or whatever. Now, with that in your stylesheet, place any text you want to wrap inside <span> tags like so:
    <span class="wrap">loooooooooooooooooooooooooooooooooooooooooooong word.</span>
    Notice there is no dot before wrap in the HTML tag. The long word will wrap.

    That answers your first question, and now you laugh (or groan) when you look at your "stylesheet." ;)

    Note that I had some issues using multiple stylesheets and making spans appear. If I added a tag, a span wouldn't work. Don't know why. 

    Instead of trying to filed your width question here, I've attached an example sheet with some explanations.

    It sounds like you're trying to use tables, so you'll probably be back with a follow-up question.

    Hope this helps!

  • EdjeEdje
    Ok that takes care of my first question and helps me articulate my second in twine.
    A scene with the functionality i'm trying to implement is attached.
    My issue now is limited to html formatting  a display call in twine, specifically placing two displayed nodes into a table
  • SharpeSharpe
    It looks to me like you did everything right to have the desired effect, but for some reason (inexperience) you ended your table several times before it was done.  ;D

    Take out all <html> and </html> tags; They don't do anything in Twin 1.4.

    Then, take out all </table> tags before your very last one.

    Looks like it works as you would like after that. :)


    However, that is not at all the right way to use tables. You don't need the spans in there. Tables can have fixed widths. It's like driving a car on a passenger train. It's not only ludicrously redundant, it's dangerous and might crash.

    Use CSS to "style" tables, not HTML. Here are two sites that explain how to style tables with HTML:

    http://www.w3schools.com/css/css_table.asp
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables

    W3Schools is much better teaching people how to use HTML, CSS and JavaScript (the three things we use in Twine) than Mozilla, but Mozilla is sometimes more accurate and better detailed.

    A quick way to do as you'd like is to take all the span stuff in your table add this to your stylesheet:
    table {
    width:200px;
    }
    That should do it!

    Attached is a story file taking into account my above suggestions.
  • douglaswelbardouglaswelbar
    Moe about...CSS Table formatting

    Douglas
Sign In or Register to comment.