On my About page, I have my picture and some text below it. I used a Paragraph Pro stack within a column. I justified the text. It looks fine on my laptop and on my iphone. But a friend sent me a screenshot of it from her Samsung phone and it looks terrible (big gaps between words). What can I do so that the text displays correctly on all devices?
If it were me…I would turn off justification…but that is just me.
Some browsers don’t understand…i.e. Samsung anything.
@sagemom The simplest solution is to not used justified text. It simply does not work well on web pages. Even before you get to a small page size it does look a bit funky. Unequal spacing between words (even mild) make it harder to read.
One key way that books get around this issue is publishing apps (Affinity Publisher, InDesign) have very sophisticated auto-hypenate options. As far as I know there are no good auto-hyphenate solutions for the web.
So I’d suggest doing as @joemart1951 said. I don’t know how you are creating your website but there are no “limits” to the width of your text. If you can I’d suggest setting a maximum container size of about 720 to 800 pixels.
When you say container size, do you mean the column it is in?
Sincerely,
Robin Traiger, LCSW
Conscious Counseling
A New Way to Expand
THIS EMAIL AND ANY FILES TRANSMITTED WITH IT ARE CONFIDENTIAL AND ARE INTENDED SOLELY FOR THE USE OF THE INDIVIDUAL OR ENTITY TO WHOM THEY ARE ADDRESSED. This document may contain information covered under the Privacy Act, 5 USC 552(a), and/or the Health Insurance Portability and Accountability Act (PL 104-191) and its various implementing regulations and must be protected in accordance with those provisions.
If you are not the intended recipient or the person responsible for delivering the email to the intended recipient, be advised that you have received this email in error and that any use, dissemination, forwarding, printing, or copying of this email is strictly prohibited.
If you have received this email in error, please return immediately to the sender and delete this copy from your system. Thank you for your cooperation.
@sagemom Sure, that’s fine in this case. If you can set a max width of the column it’s in that would do the job.
I don’t have any idea what stacks or frameworks you’re using, so I’m using general terminology. But a lot of the framework stacks (e.g. Foundry) have “container” stacks. But any stack where you can set the max width of the area will do the job.
I changed justified to left. Does’t look very good on the phone.
Sincerely,
Robin Traiger, LCSW
Conscious Counseling
A New Way to Expand
consciouscounseling.net
THIS EMAIL AND ANY FILES TRANSMITTED WITH IT ARE CONFIDENTIAL AND ARE INTENDED SOLELY FOR THE USE OF THE INDIVIDUAL OR ENTITY TO WHOM THEY ARE ADDRESSED. This document may contain information covered under the Privacy Act, 5 USC 552(a), and/or the Health Insurance Portability and Accountability Act (PL 104-191) and its various implementing regulations and must be protected in accordance with those provisions.
If you are not the intended recipient or the person responsible for delivering the email to the intended recipient, be advised that you have received this email in error and that any use, dissemination, forwarding, printing, or copying of this email is strictly prohibited.
If you have received this email in error, please return immediately to the sender and delete this copy from your system. Thank you for your cooperation.
Personally I would set to Centre on mobile and leave as Left on iPad / desktop.
Also, you should set a Maximum width to maybe 1000px to keep it under control on large screens where the padding is still effective but nevertheless the text becomes far too wide.
You may be able to do this within your theme settings. Alternatively some stacks allow for a Max Width. An excellent free one is Stacks 4 Stacks Useful Stack: https://stacks4stacks.com/usefulstack/
Yes, definitely the width is out of control. Way too wide even on my MacBook Pro when looking at pages full screen.
The left looks much better now. If it looks bad to you then you might want to test which looks “least bad”. But realistically justified text is going to cause of lot of “bad looks” (much worse than what you think left aligned is like).
In the end it’s really about “readability”. When there are unusual gaps between words is partly looks bad to really bad, but more importantly it significantly slows down a person’s ability to read easily.
If you can’t control the width with whatever tools you are using then @manofdogz makes a great recommendation with Useful Stack.
capture a pic of it on the phone and post it please
Sincerely,
Robin Traiger, LCSW
Conscious Counseling
A New Way to Expand
THIS EMAIL AND ANY FILES TRANSMITTED WITH IT ARE CONFIDENTIAL AND ARE INTENDED SOLELY FOR THE USE OF THE INDIVIDUAL OR ENTITY TO WHOM THEY ARE ADDRESSED. This document may contain information covered under the Privacy Act, 5 USC 552(a), and/or the Health Insurance Portability and Accountability Act (PL 104-191) and its various implementing regulations and must be protected in accordance with those provisions.
If you are not the intended recipient or the person responsible for delivering the email to the intended recipient, be advised that you have received this email in error and that any use, dissemination, forwarding, printing, or copying of this email is strictly prohibited.
If you have received this email in error, please return immediately to the sender and delete this copy from your system. Thank you for your cooperation.
I made these changes but now the text is cut off.
Sincerely,
Robin Traiger, LCSW
Conscious Counseling
A New Way to Expand
THIS EMAIL AND ANY FILES TRANSMITTED WITH IT ARE CONFIDENTIAL AND ARE INTENDED SOLELY FOR THE USE OF THE INDIVIDUAL OR ENTITY TO WHOM THEY ARE ADDRESSED. This document may contain information covered under the Privacy Act, 5 USC 552(a), and/or the Health Insurance Portability and Accountability Act (PL 104-191) and its various implementing regulations and must be protected in accordance with those provisions.
If you are not the intended recipient or the person responsible for delivering the email to the intended recipient, be advised that you have received this email in error and that any use, dissemination, forwarding, printing, or copying of this email is strictly prohibited.
If you have received this email in error, please return immediately to the sender and delete this copy from your system. Thank you for your cooperation.
graphic not there
You can’t reply to the email the forum sends you and have attachments. You need to log onto the forum.
I’ve just been made aware of this thread and taken a look at the code on your page.
Your paragraph pro stack that is shown in your latest screenshot is set to an alignment of inherit - this will just use the theme default alignment.
If your stack is definitely set to align justify and responsive align justify then you need to republish all files because that setting is certainly not on the live page.
I got the stack you suggested. Works great. But I have 2 paragraphs, both with the same settings but they display differently on my iphone. I put the hyphenate stack inside a column (not sure if that is correct).
I fixed it. I don’t know how but it seems to be fixed.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.