Author Topic: Line Height / Paragraph Spacing in Twine  (Read 208 times)

Kostromama

  • Fat
  • ****
  • Posts: 294
  • Karma: +25/-5
  • Prime Amazon
    • View Profile
Line Height / Paragraph Spacing in Twine
« on: November 08, 2017, 09:19:40 PM »
Hey, guys!  I've been tinkering with Twine (Harlowe) for about a year, now, and unfortunately it seems like images have been slightly broken for a really long time.  Even, so, I've gotten a prototype for a project together, but I've hit one snag:

I want, for section of one passage, to eliminate the visual space between paragraphs.  The reason for this is that I have a map broken up into multiple image tiles, but the default style creates a strip of space between the first line of tiles and the second.  I know that for someone who's actually good at using HTML this would be trivial, but my CSS-fu is bad.

Li'l help?

geekdragon

  • Average
  • **
  • Posts: 66
  • Karma: +52/-0
  • Lightweight
    • View Profile
Re: Line Height / Paragraph Spacing in Twine
« Reply #1 on: November 08, 2017, 09:56:20 PM »
I've also had some time dabbling in Harlowe, but I'm afraid my CSS-fu is also pretty terrible. I've been brute-forcing a lot of effects through trial and error, and actually made the conscious decision to avoid images altogether in my project.

That said, my first instinct would be to stitch multiple images together as elements in a zero-border HTML table, but that's definitely an old school approach. Plus Twine seems really finicky about HTML structures -- especially if you try to inject them with dynamic content.

On the CSS side, I'm far less certain. I've seen a few different suggestions depending on how you have them laid out (horizontal, vertical, combination of both). Sometimes it's just a matter of eliminating a line break in the code. Others have CSS suggestions a bit like this:
http://ccm.net/faq/25566-css-remove-space-between-images

Kostromama

  • Fat
  • ****
  • Posts: 294
  • Karma: +25/-5
  • Prime Amazon
    • View Profile
Re: Line Height / Paragraph Spacing in Twine
« Reply #2 on: November 08, 2017, 10:07:43 PM »
Hmmm... nope.  Padding and margins don't seem to do it, whether applied to img style or a new class of style.  Increasing line-height increases the gap but decreasing it still leaves a strip of empty space.

To be extra clear: The images line up side-to-side perfectly; it's just between lines that there are spaces.  But since it doesn't seem to be line-height, margin or padding creating the spaces I'm stumped.
« Last Edit: November 08, 2017, 10:12:00 PM by Kostromama »

Kostromama

  • Fat
  • ****
  • Posts: 294
  • Karma: +25/-5
  • Prime Amazon
    • View Profile
Re: Line Height / Paragraph Spacing in Twine
« Reply #3 on: November 09, 2017, 11:13:26 PM »
Update:
Code: [Select]
vertical-align: middle;
display: inline-block;
Seems to have fixed the issue.