[Resolved] text formatting questions

Home Forums Support text formatting questions

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1057364
    Alana

    Hi!

    I have a couple of formatting questions:

    1. I want to get my headings and paragraph text justified (when it comes to the content that is showing up on my Categories pages – Destinations, Travel Smarter, and Creator Resources, and also the subcategories under Destinations).

    2. I noticed that the text under the “About Me” blurb on the homepage is stretched strangely after being justified… is there a different form of justifying the text that will lead to a more natural result? (I think the initial modification was made in my Simple CSS as follows)
    .sidebar #text-2 p {
    text-align: justify;

    Thank you for your help. Really appreciate it!!
    ~Alana

    #1057952
    David
    Staff

    Hi there,

    Justified text in web is well, just terrible, the browsers just don’t have the algorithms required to make them look good – there are limited CSS properties for helping align them better all of which have really poor browser support as you can see here:

    https://css-tricks.com/almanac/properties/t/text-justify/

    Aside of trying different fonts and adjusting letter spacing there isn’t much you can do about it. There certainly isn’t any way of automatically making them look good.

    #1060035
    Alana

    Thanks for the feedback David! I have seen websites with articles that were justified that looked good on multiple browsers. Any ideas how they might have achieved that?

    Also, on mobile view – I want to get the right sidebar widget (How I Escaped…) title, text, and image to be centered. So that they’re all in visual alignment. But the button can stay on the left. I’d like the image to be wide width as well. Not sure how to code within the Widget though. Your help would be appreciated! Thank you 🙂

    #1060269
    David
    Staff

    If you want to align justified on the entry summary you can use this CSS:

    .archive .entry-summary {
        text-align: justify;
    }

    And this rule for the titles:

    .archive .entry-title {
        text-align: justify;
    }

    The above CSS rules can be combined but thought it best to keep them separate as titles may have a lot a white space – so may want to exclude that.

    A lot of variables involved in making justified text look better, from the particular font being used, the letter spacing and the column width itself. Could try an alternative font / font size to see if it improves.

    This CSS for center align the first sidebar widget for mobile:

    @media (max-width: 768px) {
        .inside-right-sidebar aside:first-child {
            text-align: center;
        }
    }
    #1060772
    Alana

    Thanks for the info, it’s definitely helping! I’ve noticed that the widget image is only high resolution when I have it set to the largest preset size format… how do I get the image to remain high quality at a custom size?

    Also, how can I get the text to stay within the width of the image while being left aligned?

    Right now my CSS code is:
    .inside-right-sidebar aside:first-child {
    text-align: center;
    }

    @media
    (max-width: 768px) {
    .sidebar .wp-caption.aligncenter {
    display: inline-block;
    }

    Thanks again for your help!

    #1061176
    Tom
    Lead Developer

    Hi there,

    As long as your image is larger than what it’s showing as (being sized down to fit), it will have a better resolution than if it’s the exact size we see.

    For example, if your widget is 300px wide, the image should be 400-600px wide in order to look nice and sharp. If the image is 300px wide as well, it won’t look super high-def.

    Not too sure what you mean about the text staying within the width of the image. Is that something I can see?

    Let me know 🙂

    #1076785
    Alana

    Hey Tom, thanks for the reply!

    The right sidebar image is 796×999 – I just changed it to the full size options but when it was set to medium (239×300) the image quality suffered. Is there a reason for this? The full size looks fine on desktop / mobile views but looks very large on iPads (not a huge deal), but I was hoping to get an image size that looks good in all formats and retains the image quality.

    When I asked about getting the text to stay within the width of the image, I meant using the image width as the left and right boundary for the text (that’s underneath the image). You can see this vary when looking the right sidebar image/text while resizing. It seems to align in the desktop view but not in the smaller screen views.

    Thanks again for your help!

    #1077049
    David
    Staff

    Images are scaled in two ways.
    First is the sizes that WordPress creates ( Large, Medium and Thumbnail ) – to create these images it has to remove pixels. And the less pixels available the lower the quality of the image.

    Second is the image auto resizing to fit its container ( ie. the sidebar ), this doesn’t remove pixels from the image, leaving the browser and the device to decide what to do with them, so most screens being higher resolution / retina now means it can pack more pixels in. So a large image being scaled down to fit provides a better quality.

    For your needs you have to select an image that fits the largest container size – which is that of the portrait iPad so 796px is the correct choice.

    You can add this CSS to restrict the width of the text below the image:

    .inside-right-sidebar #text-2 .textwidget p:not(:first-child) {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    Adjust the 640px to suit.

    #1095106
    Alana

    Thank you! This worked for every view other than mobile for some reason but I think I’ll just let this formatting issue go for now 🙂

    #1095138
    David
    Staff

    You’re welcome – let us know if you change your mind 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.