jump to last post 1-13 of 13 discussions (24 posts)

KNOWN ISSUE: two column text alignment for wrapped text

  1. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    I recently filled in a survey on how to improve HubPages but forgot to mention a very important design issue which has been bothering me for a long time.

    When a text capsule is very long, I like to turn it into 2 adjacent capsules so it works like 2 columns. Easier to read, right? But every time I conscientiously edit the capsules to contain exactly the same number of lines, they still don't align properly.

    Just look at the illustrations. (Press Ctr/+ to enlarge the screen)

    http://s4.hubimg.com/u/7609499_f248.jpg

    http://s2.hubimg.com/u/7609501_f248.jpg

    This looks SO unprofessional!

    Please, please wonderful HP staff, can you fix it?

    1. Matthew Meyer profile image77
      Matthew Meyerposted 3 years ago in reply to this

      @Sue Can you provide the title and/or URL for a Hub that is showing the issue you described?  Then we can look into the issue and see what we find.

      1. Sue Adams profile image94
        Sue Adamsposted 3 years ago in reply to this

        The above pictures are from the hub A Violent Marriage - Domestic Violence Stories. Please look at the 5th and 9th paragraphs where text capsules are used as 2 columns. The 2 columns' titles and text lines are out of alignment.

        1. Matthew Meyer profile image77
          Matthew Meyerposted 3 years ago in reply to this

          @Sue I looked at your Hub, and I do see the small alignment difference for the bottom of the last sentences, but it seems to be minor.   I don't know if there is a way to make the text align up exactly each time for the 2 column format as word length would be different for each.. I can move this thread to the suggest a feature forum if you wound like to see if the issue is something more users are looking for.

          1. Millionaire Tips profile image88
            Millionaire Tipsposted 3 years ago in reply to this

            Matthew, the alignment problem is at the top of the column.  The two columns do not start on the same line when put side by side.  The right column is always slightly lower than the left column.  Even if the text was exactly the same, the two columns would not line up the same way.

            It looks like a minor issue, but psychologically speaking, having the text side by side would indicate that both of the texts have equal value and should be read.  Having one lower makes it look like the left one should be read first, and the one on the right is possibly optional.

            1. Matthew Meyer profile image77
              Matthew Meyerposted 3 years ago in reply to this

              Thanks for the clarification.

    2. NotPC profile image60
      NotPCposted 3 years ago in reply to this

      I'm sure you have tried everything, hence why you are posting in the forums, but I am usually successful in lining up my columns by using a combination of extra spaces in text capsules and also by tweaking the sizes of my pictures.

      1. Sue Adams profile image94
        Sue Adamsposted 3 years ago in reply to this

        Hi NotPC,
        Can you please post a screen print or give a url of an example where two adjacent text capsules are properly aligned? By properly aligned I mean the lines of text in both capsules align. (like in any magazine or newspaper.)

  2. Millionaire Tips profile image88
    Millionaire Tipsposted 3 years ago

    I would like this also.  Setting text side by side is great for comparison hubs.

  3. KDeus profile image95
    KDeusposted 3 years ago

    This has been something that I noticed, too. And it's an easy fix on their part. For the capsules that have colored background, they apply a 10px padding around the text so that the text won't run up right to the edge of the colored box. When the background remains white, they have removed the padding from right, left, and bottom, but the 10px padding still remains on top. This is a simple change in their style sheet to remove it, unless they have a compelling reason to have it there, although I haven't yet seen what that might be.

  4. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    If, as you say, Kdeus, if it is a simple change, then let us hope that the padding at the top (for right-hand white text capsules) will be removed in the style sheet a.s.a.p.

  5. 2uesday profile image87
    2uesdayposted 3 years ago

    From the point of view of someone making a page it would be easier if you could drag and drop the capsules up and down the page. Then when you want two capsules to align side by side if you could 'click'/toggle them to line up that would produce a neater look.

  6. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    @Mathew,
    There is no need to move this thread to the suggest a feature forum. We are not asking for a new feature, this is a technical problem,  a mistake in the design that can easily be corrected by removing the padding from the top of right-hand text capsules.

    To sum up: Adjacent text capsules should line up horizontally at the top.

    1. Matthew Meyer profile image77
      Matthew Meyerposted 3 years ago in reply to this

      I've sent this to our engineering team.  Thanks.

      1. Sue Adams profile image94
        Sue Adamsposted 3 years ago in reply to this

        Thank you Mathew, much obliged.  And thank you too, KDeus and Millionaire Tips for helping to clarify the problem.

  7. Howard S. profile image86
    Howard S.posted 3 years ago

    This horizontal misalignment issue occurs with ad and photo capsules as well, and probably any other capsule types that can float right. I routinely fudge the format when it's important; I hadn't thought of getting it fixed. Thanks!

    1. Sue Adams profile image94
      Sue Adamsposted 3 years ago in reply to this

      You are quite right Howard, I often have to go through the painful process of adding a white top border to pics in Photoshop so at least they align with the first line of  text of an adjacent text capsule, if not with the title  (as photos often don't have a title). So the thing to do would be to remove top padding from all right-hand capsules?

      For example, this photo from the hub Dangers And Risks Of Eating Meat has a top white border added to it in Photoshop for alignment purposes.

      Press Ctr/+ to enlarge screen, Ctr/0 for back to normal.

      http://s3.hubimg.com/u/7616338_f248.jpg

      In comparison, the next picture from the hub Facial Massage Techniques is of a photo without added white top border. See how it doesn't align with anything, not with the bottom of adjacent title nor its first line of text. This is design rubbish!

      http://s4.hubimg.com/u/7616379_f248.jpg

      So to sum up about half size photo capsules:

      If the half-size photo capsule has no title, its top should have padding to match the first text line of an adjacent text capsule.
      If a half-size photo capsule has a title, that title should match the title of its adjacent text capsule.

      But for starters, and in any event, the right-hand text capsules should align properly with their neighbor on the left.

  8. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    Can this text alignment issue not be resolved?

  9. Howard S. profile image86
    Howard S.posted 3 years ago

    I believe the problem has been fixed in the past few days and the issue should be considered resolved. I see a definite difference. Sue, please confirm that you still see the problem.

  10. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    Hi Howard & staff,
    Yes, thank you clever engineers for aligning the headings. But we're not finished yet.

    (Ctr/+ to enlarge image)
    http://s1.hubimg.com/u/7646008_f248.jpg

    There are 2 more things to tweak:
    1. The space between paragraphs should be the same as the space that a line of text occupies.

    2. The two column-widths are not equal. The second column is much wider.

    Please let us go the whole way, with 2 more tweaks, towards professional looking design.

  11. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    PS
    If the second column-width is reliant on the width of adverts, then simply widen the first column a little. The whole page-width will still be fine (I think). Or... narrow the Ads? I dunno... you are in charge here.

  12. Howard S. profile image86
    Howard S.posted 3 years ago

    I do not agree with Sue Adams' suggestion that paragraph spacing be a double line space. That effect can easily be achieved by inserting two line breaks. In the editor, press <Shift>+<Enter> twice.

    The convention of double line space between paragraphs goes back to the days of typewriters with carriage returns. Modern typesetting always attempts to use a fraction between paragraphs, more than one less than two.

    1. Sue Adams profile image94
      Sue Adamsposted 3 years ago in reply to this

      You don't understand Howard. Please look at the illustration again at issue Number 1.

      The text in the right hand column should be level with the text in the left hand column, even after a paragraph break.  I don't mind how that is achieved.

  13. Sue Adams profile image94
    Sue Adamsposted 3 years ago

    Thank you clever engineers for tweaks made so far. As this issue is still a "Known Issue" and almost but not entirely resolved, here is what can be done towards resolving it. Please look at the illustration in enlarged mode.

    Press Ctr./ + to enlarge picture, Ctr./ 0 for back to normal:

    The text of the right-hand column re-aligns at the bottom because there is a paragraph break in the left hand column as well. But because the paragraph breaks are too small it creates miss-alignment until you have a paragraph break in both columns. The solution is to make the distance between 2 paragraphs the same as a line of text. That should be easy to tweak, then text will align perfectly.

    After that, we are still left with the question: Why are the 2 text column width not equal?

    http://s1.hubimg.com/u/7646008_f248.jpg

 
working