KNOWN ISSUE: two column text alignment for wrapped text

Jump to Last Post 1-13 of 13 discussions (24 posts)
  1. Sue Adams profile image96
    Sue Adamsposted 5 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 image74
      Matthew Meyerposted 5 years agoin 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 image96
        Sue Adamsposted 5 years agoin 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 image74
          Matthew Meyerposted 5 years agoin 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 image91
            Millionaire Tipsposted 5 years agoin 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 image74
              Matthew Meyerposted 5 years agoin reply to this

              Thanks for the clarification.

    2. NotPC profile image59
      NotPCposted 5 years agoin 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 image96
        Sue Adamsposted 5 years agoin 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 image91
    Millionaire Tipsposted 5 years ago

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

  3. KDeus profile image95
    KDeusposted 5 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 image96
    Sue Adamsposted 5 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 image82
    2uesdayposted 5 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 image96
    Sue Adamsposted 5 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 image74
      Matthew Meyerposted 5 years agoin reply to this

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

      1. Sue Adams profile image96
        Sue Adamsposted 5 years agoin 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 image89
    Howard S.posted 5 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 image96
      Sue Adamsposted 5 years agoin 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 image96
    Sue Adamsposted 5 years ago

    Can this text alignment issue not be resolved?

  9. Howard S. profile image89
    Howard S.posted 5 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 image96
    Sue Adamsposted 5 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 image96
    Sue Adamsposted 5 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 image89
    Howard S.posted 5 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 image96
      Sue Adamsposted 5 years agoin 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 image96
    Sue Adamsposted 5 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

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)