Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
matthewthenewbie
 
 
Posts: 20
Joined: Wed Jun 16, 2021 2:09 am

Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by matthewthenewbie » Thu Jun 24, 2021 2:39 pm

Hi i am back again ,

I am getting very frustrated with the limited options for a dimension where anything is possible , this is my 6th day trying to figure to this out .

The aim : All I need is a website , with webpages of a width of the 960pixel standard ( in Britain anyway ) , which will work correctly on any device .

The problem : regardless of what I 'try' to do , and how small the text boxes I use , I can never ( not even close ! ) match the text alignment in one browser compared to another browser .

The Terms used for this are : Letter Spacing , Kerning , Tracking , Leading .

The conflicting Browsers : Chrome / Safari VS Android Samsung Internet .

If , in any ( preferably easy ) way I can match text , published online , and view from an Android ( Samsung Internet ) and compare it to Chrome ( or/and Safari ) - I would have completed exactly what I need to do using only this WYSIWYG software .

Please note : that I am not even able to use the 'Tab' button to create a quick gap ( &nbsp ) inside a text box either . - I was able to do this in Webplus X6 , so , this being a newer advanced version , can anyone with good experience of this software share here on this forum on what the alternative is please ?

User avatar
Pablo
 
Posts: 24274
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by Pablo » Thu Jun 24, 2021 3:08 pm

Maybe there is a problem with the DPI configuration?
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=85917

Or else:
viewtopic.php?f=10&t=34318

If you need further assistance then please share a demo project so I can see what you have done.

matthewthenewbie
 
 
Posts: 20
Joined: Wed Jun 16, 2021 2:09 am

Re: Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by matthewthenewbie » Thu Jun 24, 2021 7:22 pm

Pablo wrote:
Thu Jun 24, 2021 3:08 pm
Maybe there is a problem with the DPI configuration?
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=85917

Or else:
viewtopic.php?f=10&t=34318

If you need further assistance then please share a demo project so I can see what you have done.
Hi Pablo ,

Thanks for getting back to me on this , it is a doozy on my brain .

I dont really mind if the text is pixel matching perfect , letter for letter etc or line or for line etc , it does not have to be , but not as much as what it currently being displayed , All I wish to accomplish , on the small text boxes , that the 'colon's' are closely lined up with each other on the 4 or 5 lines within each text box ( preferably with any font - including Verdana ) .

for example :
====================================
The cat sat on the : mat outside the train station platform .
The Potato was : extremely overcooked .
The rain in Spain : stayed mainly on the plane . <<<<------- OK , I cant do it here either as the software cancels out the extra
Betty Boop sells the : best burgers in Arizona . spaces , but you get the idea , right ?
===================================

In other forums , it is mentioned that Web Fonts are 'Safe' Fonts , but the only font that came close to good/perfect was Calibri , the other Safe Fonts were just displaying the same amount of letter distances as much as other non-safe fonts .

I also tried the Google Fonts , which do mostly work the way I want , but the font designs are ugly and the closest I found was Catarmaran , and I would rather , really like to use my fonts that I have already on my computer , without having to rely on Google Corp . :roll:

I have attached my latest version of the site so far , as well as 2 images , not much has changed so far , so the file is small , when you load it up , go to 'Play Lottery Now' , underneath it , find the child page , this is titled 'ACT-Lottery-List.html' , After the Large blue text section , where the 'Draws details' begin this is where I started encountering the problem .

https://www.dropbox.com/s/s3x0x2vxxi1q4 ... l.png?dl=0

https://www.dropbox.com/s/jstcd0v3ab0jj ... d.png?dl=0

https://www.dropbox.com/s/mtbxwc8ykt32h ... 2.zip?dl=0

I tried HD DPI settings - a dozen times at least with different combinations in relation to settings , but if it is DPI - I have missed something and I will need more instructions on what to do .

One thing I really want to avoid is turning the text into an image , it is not clear and make the website look shoddy , and that is with using the PNG files ! :cry:

I also tried some of your Advanced settings with text boxes - I think I did - but without training or experience I fail miserably trying to find a solution .

I am bummed out , I am looking for some light out of the tunnel . :D

If anyone throws code into the conversation , would you kindly explain or screenshot with an arrow of where it needs to be inserted to , I tried using custom code so far , and I have only been able to accomplish Apple devices do NOT transform numbers into 'telephone numbers' . :idea:

Thanks Pablo , and anyone else that can throw in some insight to this puzzle , would be greatly appreciated .

User avatar
crispy68
 
 
Posts: 1590
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by crispy68 » Thu Jun 24, 2021 7:38 pm

I have not had a chance to download your project yet, but 2 observations at looking at the images you provided:

1. Why are you trying to stick CSS code in the meta tag section? What exactly are you trying to do?

2. Trying to get colons, dashes, etc to line up perfect in a text box like you are doing is going to be difficult. Each character width is different so there is no way from line to line to accomplish this in WB that I know of other than using a table or you could use 2 text boxes where the 2nd text box (on the right) starts with the colon followed by your text and then line it up with the first text box. Otherwise, you would have to look at manually coding something probably using an unordered list.

User avatar
Pablo
 
Posts: 24274
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by Pablo » Thu Jun 24, 2021 7:44 pm

All I wish to accomplish , on the small text boxes , that the 'colon's' are closely lined up with each other on the 4 or 5 lines within each text box ( preferably with any font - including Verdana ) .
I have mentioned this in a previous post, this is only possible with monospaced fonts, if you use a table or publish the text as an image.
There is no way to predict hwo the text will exactly look when you publish it. All browser render text in a different way. It may even be different in the next update of a browser.
This is not specific to WWB, this is how HTML works. WWB just published the text "AS IS".
This is not the right place to add custom code. This will break the structure of the page. This section is for meta tags only. You should use a HTML object instead.
However, you can do the same with the built in text tools. There is no need for custom code.
If you want to align text like this then you will either need to use a monospaced font, a table or publish the text as an image.

matthewthenewbie
 
 
Posts: 20
Joined: Wed Jun 16, 2021 2:09 am

Re: Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by matthewthenewbie » Thu Jun 24, 2021 9:24 pm

crispy68 wrote:
Thu Jun 24, 2021 7:38 pm
I have not had a chance to download your project yet, but 2 observations at looking at the images you provided:

1. Why are you trying to stick CSS code in the meta tag section? What exactly are you trying to do?

2. Trying to get colons, dashes, etc to line up perfect in a text box like you are doing is going to be difficult. Each character width is different so there is no way from line to line to accomplish this in WB that I know of other than using a table or you could use 2 text boxes where the 2nd text box (on the right) starts with the colon followed by your text and then line it up with the first text box. Otherwise, you would have to look at manually coding something probably using an unordered list.
Hi Crispy68 ,

Answers to your questions :

1 : I genuinely have no idea , I have been up for days stressed out over this problem , I was trying out random stuff , hoping to find a solution or a substitute fix . :oops:

2 : I realise that is never possible to accurately match alignment of text with just any text if their are differences in the framework etc , but I used to get really really close to getting what I wanted using ( Tab ) &nbsp but this is not available on this WYSIWYG and I have to get used to it , especially if there is no option for it .

The 2 text boxes option , I will keep this as my last resort , Clever thinking Crispy68 :D

matthewthenewbie
 
 
Posts: 20
Joined: Wed Jun 16, 2021 2:09 am

Re: Basic Text not matching with other Browsers - Letter Spacing -Kerning - Leading - Tracking -

Post by matthewthenewbie » Thu Jun 24, 2021 9:42 pm

Pablo wrote:
Thu Jun 24, 2021 7:44 pm
All I wish to accomplish , on the small text boxes , that the 'colon's' are closely lined up with each other on the 4 or 5 lines within each text box ( preferably with any font - including Verdana ) .
I have mentioned this in a previous post, this is only possible with monospaced fonts, if you use a table or publish the text as an image.
There is no way to predict hwo the text will exactly look when you publish it. All browser render text in a different way. It may even be different in the next update of a browser.
This is not specific to WWB, this is how HTML works. WWB just published the text "AS IS".
This is not the right place to add custom code. This will break the structure of the page. This section is for meta tags only. You should use a HTML object instead.
However, you can do the same with the built in text tools. There is no need for custom code.
If you want to align text like this then you will either need to use a monospaced font, a table or publish the text as an image.
=========================
Letter Spacing - SOLVED !
=========================

Hi Pablo ,

By Joves - you have said the relative word I was looking for ! Mono-Spaced Text Fonts !

That was the answer I needed Monospaced Fonts ! :D

Absolutely Brilliant ! :D

Monospace Fonts are the relative or compliment to Letter Spacing , Kerning or Tracking Text issues - Splendid . 8)

I just tried it on my project , I doubled click the text box , pressed Ctrl A and right clicked on the highlighted blue and selcted 'Remove Formatting , view it normally , then pressed Ctrl A again and went to my fonts and selected Courier New , Size 12 , and guess what ? it worked like a charm !

I am really exhausted , but I had to reply tonight and share the good news with you , I am planning to try other ( 'MS' titled ) MonoSpaced Fonts and hopefully find another compatible and more aesthetic font for the website text content .

Thank You Pablo , I would NEVER have thought of that in a thousand lifetimes . :D

Post Reply