6 Replies Latest reply on Jan 29, 2012 1:53 PM by groove25

    How do I make the margin beneath the text in a text box smaller?

    JJBBDD

      Hi-

       

      I'm trying to either make the inner margin in a text box smaller, or align the text on the bottom of the text box in fireworks. (by text box, I mean the box surrounding a text element).

       

      With the extra space beneath the text, I can't place the text box close enough to the element beneath it without the two boxes overlapping. Not sure I'm making this clear; please see the screenshot.

       

      Thanks in advance for the help!

       

        • 2. Re: How do I make the margin beneath the text in a text box smaller?
          groove25 Level 4

          That's a good question, and a surprisingly tricky problem...

           

          Adjusting the text box padding or aligning the text to the top or bottom may not be possible. (I'm using FW8, though, so I could be missing out on a more current solution to this.) However, I can suggest two options:

           

          • Use Baseline Shift. On my FW version, this option only appears in the Properties Inspector when the Text tool is selected and the text itself is also selected. (Otherwise, you can access it using Text > Editor… .)  I found that a value of -8 works to align the text to the bottom of its bounding box.

                baseline close-up.png

           

          • Choose Text > Convert To Paths. This converts the text to vectors, which makes it no longer editable. The upside is that the extra padding is removed and the bounds snap to the vector group.

           

          But I have to ask: Why are you concerned about the text boxes overlapping?

          • 3. Re: How do I make the margin beneath the text in a text box smaller?
            JJBBDD Level 1

            Hi g-25-- appreciate the response. adjusting the text box padding, for some reason, didn't work for me. It moves the text around, but takes the bounding box (i was wondering what that term was) with it.

             

            I'm trying to do this so I can properly export the text as html + css. If the bounding boxes overlap. firefox changes to absolute positioning... which I don't want. And I need it to be text which rules out your second suggestion. I think I'll just have to manually edit the exported css to make the fix, though that means a headache and painkillers as infidum.

            • 4. Re: How do I make the margin beneath the text in a text box smaller?
              groove25 Level 4

              Ahhh... that's a really good reason. It *would* be nice if Fireworks' text boxes could emulate the CSS box model and include features like background, border, padding, etc.

               

              When you say that "adjusting the text box padding" didn't work for you, do you mean "adjusting baseline shift"? Because baseline shift should have absolutely no effect on the bounding box itself (though I don't know what it's effect is on exporting to HTML + CSS). The box itself stays rock solid, while the individual letters move up or down.

               

              baseline applied.png

               

              Nevertheless, it's not the greatest solution. In this context, if you want to preserve the flow of your text content while maintaining maximum control over its appearance—and avoid the conversion to absolute positioning—your best bet might be to use a single text box. If you think about it, there are plenty of ways to control the placement and appearance of text within a single box (although it may not be how you prefer to work). Keeping things "in flow" should keep them from being absolutely positioned upon conversion.

               

              Aaron Beall has developed a nice set of Text commands for Fireworks—including a "Merge Text Boxes" command that could be helpful to you if you wanted to combine your multiple boxes into a single text box. (I was originally wondering if anyone might have developed a command to snap the bounding box of text to the text itself—to its inner "raw" dimensions—but I didn't find one.)

               

              http://fireworks.abeall.com/extensions/#Text

              • 5. Re: How do I make the margin beneath the text in a text box smaller?
                JJBBDD Level 1

                Looking at your screenshot, baseline shift is EXACTLY what I wanted, but for some reason, in my fireworks, the bounding box moves. See screenshot below. What version of FW are you running?

                 

                At first I was using different text styles within the same text box, like you suggest, but when you export as CSS, each text box ends up with only one style based on the first character in the box. It's nitpicky, but it would be nice to if the cssexporter picked up all styles in a box. I'll check out those extensions, but seems like I'd run into this same issue.

                 

                So, for now, I'm using one box, exporting one text style, then manually adding styles directly in the code.

                 

                Thanks for you help!

                2012-01-29_103556.png

                • 6. Re: How do I make the margin beneath the text in a text box smaller?
                  groove25 Level 4

                  I'm running Fireworks 8, the version just prior to CS3. I know that they've upgraded the text engine at least once (if not more times) since then, so that might explain the difference.

                   

                  Chances are, baseline shift would have no effect on the HTML/CSS output, no matter which version you use. I don't believe there's a baseline shift property available in CSS, so there's be nothing to map to upon export... (Whoops, I stand corrected: apparently, there is a CSS3 property for this. Still, it's probably not the right fix for this issue.)

                   

                  The nice thing about learning HTML and CSS is that it's free and you don't have to rely on having the latest version of an application to get the results you want. The downside is that it eats into design time. That said, you might want to check out Adobe's new Muse application, which is available as a free download during its Beta period:

                   

                  http://muse.adobe.com/