[Pro] Newbie - HTML Text issue

Hiya,

I am getting the hang of Freeway (I think!), but I can’t seem to understand how to make my HTML text preview in Freeway or in a browser so it looks the same as it does in the page window. The text always seems to spill out of the HTML box. I use the web safe fonts from the font pop up and set my sizes in pixels.

Thanks

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Nigel. I’m a newbie too, and this forum has quickly resolved a few of my issues v quickly. I’m sure a more expert person will answer you, but I had similar problems. So my 2 penny-worth… if you have text boxes overlapping anything (more text OR a pic) (even a little) that causes odd run-around. Also, my site was looking really odd - graphics missing, text odd etc. Dave advised me on this chatroom that it looked fine on his mac. Suggested my cache might be problem. it was, cleared it straight away. Now whenever stuff looks odd, my 1st port of call is clearing cache and if needs be, checking on another pc. It seems sometimes when it looks odd to you, to the rest of world it is fine. Hope that might help. Its a good bit of software tho, isnt it? :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hiya

Thanks for the reply Dave. Yes, it’s a great piece of software! I have noticed odd things happen when i overlap stuff and also got into the habit of emptying the cache. My text is placed over a simple graphic box with a simple colour and border, but even when i delete the graphic box, the problem persists.

thanks

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you post a link to your online page so that we can see the issue - this allows us to see the underlying code/page structure.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

delta dave to the rescue :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi,

Thanks. Here is the address:

http://shapecutters.co.uk/applicationsii.html

The amount of text overflow varies between browsers. It bad in Freeways own preview and also Safari.it’s a bit better in IE. In page mode in Freeway it looks perfect :slight_smile:

Thanks

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Nigel,

Did you mean to put soft breaks in each list entry? A better way of doing this is to use Leading on the list to add space between each line. Try this:

  1. Remove the soft returns at the end of each line
  2. Select one of the lists
  3. Go to the Style menu and select 20px in the Leading submenu
  4. Click on the circled T in the Inspector to see what style was just created (it will be the last one in the list under the Text section)
  5. Select the other list
  6. Apply the style that was just created (or, just repeat step 3)

This way you’ll get consistent spacing between list items and don’t have to go through each list hitting Shift-Return on each line.

Hope this helps.

Joe

On 7 Dec 2011, at 09:18, Nigel Gilbert wrote:

Hi,

Thanks. Here is the address:

http://shapecutters.co.uk/applicationsii.html

The amount of text overflow varies between browsers. It bad in Freeways own preview and also Safari.it’s a bit better in IE. In page mode in Freeway it looks perfect :slight_smile:

Thanks

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Rather than layer HTML text on top of image boxes, try styling the HTML text box itself.

e.g. Give the HTML text box a 1px black border, a blue background, and then importantly add padding to the HTML box of say 15px all round.

Then the HTML box will stretch downwards to fit, whatever the browser.

David

On 7 Dec 2011, at 09:18, Nigel Gilbert wrote:

Hi,

Thanks. Here is the address:

http://shapecutters.co.uk/applicationsii.html

The amount of text overflow varies between browsers. It bad in Freeways own preview and also Safari.it’s a bit better in IE. In page mode in Freeway it looks perfect :slight_smile:

Thanks

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hiya David,

Thanks, that sorted things out. I still don’t quite understand how I end up with things looking OK in the Page tab of Freeway but things look very different when I preview?

ta

Nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In Freeway’s normal design view, you are not seeing HTML. You are seeing the Freeway object model, and that isn’t based on HTML at all. Things you draw there are translated into HTML when you publish or preview, and that HTML is subject to the rules (and frankly, idiocies) of what HTML and CSS can do. It’s even worse if you look at the same page in a handful of different browsers, too. The only way to approach Web design and not go bonkers is to understand that your design is the merest of suggestions, and build in space for things to shift and grow. Pixel-level design is all well and good, but it’s not truly possible in the same way that print design or signage or some other real-world expression of your intent can be.

Walter

On Dec 7, 2011, at 8:40 AM, Nigel Gilbert wrote:

Hiya David,

Thanks, that sorted things out. I still don’t quite understand how I end up with things looking OK in the Page tab of Freeway but things look very different when I preview?

ta

Nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Thanks for the explanation! I had sort of expected Freeway to be a bit more wysiwyg from it’s DTP approach to design.

Thanks all

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It is, but it’s as WYSIWYG as HTML allows. The design view is a sort of “average” of a lot of different browsers. It gets you close. But Preview is a WebKit (Safari/Chrome/many other browsers) view, so it’s exactly what you would see in a standards-compliant browser. But then there’s all those lost souls with IE plus Firefox and Opera (both standards-compliant, but with different default settings). Each of those browsers (and the platforms they run on) offer their own unique take on your HTML and CSS. While Freeway’s CSS is fairly bulletproof, there are still some ways that a layout can shift or overlap or change when stressed in that way.

All I was trying to stress here was that even though Freeway (or any other Web design application) gives you a set of precise tools to create your design intent, the browsers only approximate what you’ve requested, even on the best of days. HTML and CSS were never envisioned as pixel-perfect layout tools, they were always about communicating relative importance – “this thing ought to be twice as large as this other thing”. The browser, after all, belongs to the viewer, and she may have tweaked her font sizes to make up for raging macular degeneration.

The HTML designer recognizes that difference from print and allows for it.

Walter

On Dec 7, 2011, at 1:33 PM, Nigel Gilbert wrote:

Hi Walter,

Thanks for the explanation! I had sort of expected Freeway to be a bit more wysiwyg from it’s DTP approach to design.

Thanks all

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great explanation of HTML vs browsers/platforms.
I will use this next time a client worries about design changes.
Thanks,
Ruth

On Dec 7, 2011, at 11:47 AM, Walter Lee Davis wrote:

It is, but it’s as WYSIWYG as HTML allows. The design view is a sort of “average” of a lot of different browsers. It gets you close. But Preview is a WebKit (Safari/Chrome/many other browsers) view, so it’s exactly what you would see in a standards-compliant browser. But then there’s all those lost souls with IE plus Firefox and Opera (both standards-compliant, but with different default settings). Each of those browsers (and the platforms they run on) offer their own unique take on your HTML and CSS. While Freeway’s CSS is fairly bulletproof, there are still some ways that a layout can shift or overlap or change when stressed in that way.

All I was trying to stress here was that even though Freeway (or any other Web design application) gives you a set of precise tools to create your design intent, the browsers only approximate what you’ve requested, even on the best of days. HTML and CSS were never envisioned as pixel-perfect layout tools, they were always about communicating relative importance – “this thing ought to be twice as large as this other thing”. The browser, after all, belongs to the viewer, and she may have tweaked her font sizes to make up for raging macular degeneration.

The HTML designer recognizes that difference from print and allows for it.

Walter

On Dec 7, 2011, at 1:33 PM, Nigel Gilbert wrote:

Hi Walter,

Thanks for the explanation! I had sort of expected Freeway to be a bit more wysiwyg from it’s DTP approach to design.

Thanks all

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Thank you for that explanation, it’s starting to make sense :slight_smile:

ta

nige.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options