If you insert an inflow HTML box after a text cursor - either directly on the page (as Walter noted) or in another box - you should see an Align menu in the Measurements section. This contains the following options: None, Left, Center, Right, Float Left, and Float Right.
There is one called Middle
In that case you’re looking at an inline graphic rather than an inflow HTML box. Graphic boxes and HTML boxes behave differently (in CSS and in Freeway). The essential difference is that graphic boxes (including pass-through graphic boxes) can be placed inline with other text (e.g. embedded in paragraphs), while HTML boxes cannot be on the same line as other text - although they can stand on their own line as part of the text flow.
If you want to centre an inline graphic, you can use the other technique I mentioned earlier: click immediately after the graphic (to get a text cursor) and select the “Center Align Paragraph” button in the Paragraph section of the Inspector palette.
I was a little confused about the terminology of inflow and inline design. So I read the appendix 1 on layout options, and as far as I can figure out, what I need is the one you call “percentage based inflow layout”. So I started going through the tutorial for that.
Here are my firs steps and some questions/remarks:
p227 last but one paragraph:
“In the browser window you will see…”
Hm-at this point of the tutorial, no page has been created, and the master is not displayed in the browser.
p228 start
After I created a page, added some text in the Header and centered it using the space bar, what I see in the browser ist that the Header fills the whole width, but the text is not centered. So it looks like I have to make the container field the approximate width of the text (if that is smaller than the design width). Or have I overlooked something?
Concerning the styling of text:
I added a font to the Font List, where it appears as Font Set 1. Later I tried to give it its name (Bradley Hand). I could not find an option to re-name or delete a font from the list, so I chose New again, this time entering the name. While the dialog was open, I changed the default Font Set 3 to 1. In the list, it appears again as Font Set 1, but no name. - Is there a way to remove and/or re-name custom fonts from the list? And what do I need to do to enter a font and have it displayed with its name?
p228
“Because there is some content inside […] After that, click in the Height field in the Inspector’s Measurements panel and enter 1000px for both of the inserted HTML items …”
The Measurements panel does not offer a choice of entering figures. The Dimensions panel does. And there are 3 choices. The respective popups call them ‘Minimum height’, ‘Height’ and ‘Maximum height’. Hoping to hit the intention of the tutorial, I enter 600px in the middle field.
“…before previewing in a browser to see it all looks a lot more like a proper web page.”
No it doesn’t. The height-enlarged items (leftpanel and rigthpanel) are placed unter the footer, extending upward through the footer into 1/2 of the height of a space between header and footer. It is this space which has the color given to the page-wrapper, but only the lateral parts, not the space between the panels.
“Test the percentage widths set on the pagebodycontainer, leftpanel and rightpanel items to see that as you change the width of the browser window the items change in relation to each other.”
Yes they do.
Maybe it’s time for a break, looking forward to your corrections of my endeavour.
Also, I’d like your verbose definition of ‘Measurements’ and ‘Dimensions’ in this context.
And a merry Christmas!
Hening
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I can’t comment on the guide, I’ve never read it. But I can (hopefully) make the distinction below a little clearer.
On Dec 22, 2018, at 10:37 AM, Hening email@hidden wrote:
Also, I’d like your verbose definition of ‘Measurements’ and ‘Dimensions’ in this context.
In the Measurements segment of the Item Inspector, you can change the units that are used when positioning an element (or adjusting another aspect of how it is measured). But within that same area, you will see absolute measurements in pixels based upon the Freeway design board. Below, in the Dimensions segment, you will see that the measurements are translated into the actual unit+relative distance that you’ve created using the Measurements segment.
Quick example:
Draw an HTML box on the page somewhere. (Absolute positioning.)
In the Measurements segment, make note of the L (left) and T (top) dimensions, which indicate how far this HTML box is from top-left of the Freeway layout. Note that the same values are repeated in the Position section of the Dimensions segment.
In the Measurements segment, change the H. Align from Left to Left %.
Note the change in the Dimensions segment. The absolute measurement is translated into a percentage. Now if the page size changes, the left side of the box will be positioned the same relative distance (but further or closer to the left, depending on the direction of change.
This example would not result in any measurable change unless the width of the page was set to Flexible or Min/Max. Otherwise, Freeway will set the page (what every relative element is measured by) to a static dimension, and the fact that elements were relatively (percentage-based) positions from one side or the other would not result in any change when the browser dimensions changed.
Thank you, Walter! That might look like Measurements are measurements, whereas Dimensions are the position of the item on the page. But the Dimensions pane also contains a sub-heading Size. How does that differ from Measurements ? Under this sub-heading, the Width field shows the same value as the W field in Measurements, and bot the Height and Minimum Height fields show the same value as the H field in the Measurements panel.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Both position and size can be set to percentage widths, so that’s why they are both listed there. My example was using position as the thing that changed, but you can apply the same logic to the size of an object as well, in the same manner.
A percentage-sized object will always occupy the same relative area on the page, regardless of the viewport and overall page height.
It’s usual to set the height of an object to “shrink” to its contents, but there are cases where you would want to use a percentage height, too. Remember that if you have defined a percentage height, and the contents (text) grow because the font-size has been raised by the user (for readability, for example) then the contents can overflow the box. Setting the height to Flexible (which actually removes the height attribute altogether) allows the box to shrink OR grow to fit its contents.
Walter
On Dec 22, 2018, at 3:41 PM, Hening email@hidden wrote:
Thank you, Walter! That might look like Measurements are measurements, whereas Dimensions are the position of the item on the page. But the Dimensions pane also contains a sub-heading Size. How does that differ from Measurements ? Under this sub-heading, the Width field shows the same value as the W field in Measurements, and bot the Height and Minimum Height fields show the same value as the H field in the Measurements panel.
On 22 Dec 2018, at 20:41, Hening email@hidden wrote:
That might look like Measurements are measurements, whereas Dimensions are the position of the item on the page. But the Dimensions pane also contains a sub-heading Size. How does that differ from Measurements ? Under this sub-heading, the Width field shows the same value as the W field in Measurements, and bot the Height and Minimum Height fields show the same value as the H field in the Measurements panel.
The Measurements section and the Dimensions section are just alternative ways of setting measurements. The basic difference is that the Measurements section is simplified and always displays values as pixels (even if they’re being output as percentages or something different). The Dimensions section shows the actual units that are being output.
Thanks Jeremy. That is a short and handy definition. - Please could you also help me with the tutorial? It need not be before Christmas. But I’m stuck in my process. If I can not follow the tutorial, how can I learn FW?
A happy Christmas! - Hening
freewaytalk mailing list
email@hidden
Update your subscriptions at:
On 22 Dec 2018, at 15:37, Hening email@hidden wrote:
p227 last but one paragraph:
“In the browser window you will see…”
Hm-at this point of the tutorial, no page has been created, and the master is not displayed in the browser.
When you create a new document it automatically contains a page and a master page. At this stage in the tutorial, the page should contain all the items that you added on the master page, and if you preview in a browser you should see that page displayed. (That’s what happens for me.)
p228 start
After I created a page, added some text in the Header and centered it using the space bar, what I see in the browser ist that the Header fills the whole width, but the text is not centered. So it looks like I have to make the container field the approximate width of the text (if that is smaller than the design width). Or have I overlooked something?
Don’t use the space bar to centre text, in Freeway or anywhere else. It’s a particularly bad idea in Freeway, because when the text is displayed in a browser consecutive spaces will be collapsed into a single space.
To centre text, click on the “Center Align Paragraph” button in the Paragraph section of the Inspector palette.
To centre an inflow item, you can give it auto left/right margins (as the tutorial suggests) or you can just click on the “Center” option in the Align popup - which does this for you.
Concerning the styling of text:
I added a font to the Font List, where it appears as Font Set 1. Later I tried to give it its name (Bradley Hand). I could not find an option to re-name or delete a font from the list, so I chose New again, this time entering the name. While the dialog was open, I changed the default Font Set 3 to 1. In the list, it appears again as Font Set 1, but no name. - Is there a way to remove and/or re-name custom fonts from the list? And what do I need to do to enter a font and have it displayed with its name?
Edit Font Sets (Edit menu) will let you change the name of a font set. Double-click on a name to edit it. Clicking on the minus button will remove a font from the list.
p228
“Because there is some content inside […] After that, click in the Height field in the Inspector’s Measurements panel and enter 1000px for both of the inserted HTML items …”
The Measurements panel does not offer a choice of entering figures.
There are two fields (“W” and “H”) which let you enter a width and a height. The Height popup (in the Measurements section) defaults to Minimum - meaning that the figure you enter here is a minimum height. An item that has a minimum height can grow taller to fit its content.
For inflow layout, where you want items to grow and shrink to match the screen size, it’s a good idea to use flexible or percentage measurements.
Available width (undefined width) causes an item to take up whatever width is available
Percentage width/height causes an item to take up a percentage of its parent’s width/height
Flexible height (undefined height) causes an item to grow and shrink to fit its content
Sometimes it also helps to define a maximum or minimum value. Pages normally default to having a maximum width: if you view them on a narrow screen, they will shrink to fit - but if you view them on a wide screen the paragraphs won’t become so wide that they are difficult to read.
I hope you all had a good Christmas holiday and a funny move into the new year!
I have now gone through the tutorial again, fixed the font names and centered the text in the text field in the header-container.
I centered the text in the header, but aligned the text in the footer to the left. The latter is not rendered in the browser, the text in the footer is centered as well.
And the Left-panel and Right-panel items look like in the Tutorial - in my FW editor. But in the browser, they still extend below the footer. The height of the pagebody-container IS set to Flexible.
??
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I centered the text in the header, but aligned the text in the footer to the left. The latter is not rendered in the browser, the text in the footer is centered as well.
I’m not sure why this is. If you go to the non-master page and select “Reapply Master”, does this fix it?
And the Left-panel and Right-panel items look like in the Tutorial - in my FW editor. But in the browser, they still extend below the footer. The height of the pagebody-container IS set to Flexible.
??
Have you applied the Auto Clearfix Action (see end of tutorial)?
Hi Jeremy,
thanks for your reply. - It looks like I have lost my attempt to follow the tutorial, so it will take me a while to repeat it and follow your suggestions.
Kind regards - Hening
freewaytalk mailing list
email@hidden
Update your subscriptions at: