Graphic Elements Have Shifted Alignment When Xway File is Reopened

I place a graphic element within a box, align it, and save the file. When I reopen the file, the graphic has shifted several px’s along the horizontal axis. Am I neglecting to “fix” them in place somehow?

Hi Gary,

If you send me a document and some steps to reproduce (message me a download link, or send to support at softpress dot com) I could take a look.

With flexible designs, you don’t want to have a box always be at the same pixel position, but it shouldn’t move within Xway if the document window is the same size. (Xway’s Page view is flexible, like a browser.)

JEREMY–
thanks for the offer. to honor your time, I’ll try a few things first before sending the doc along.
To be more precise: I can be working within an Xway website file, moving from page to page, and when I return to a particular page after having aligned the graphic, it has moved.
So: should I SAVE each time I leave a page, even with the doc open? that seems farfetched, but it may solve my problem.

I’ll keep trying to figure out where the glitch is…

GARY

My guess is that the graphic hasn’t really moved, but there could be a glitch that causes it to be displayed in a slightly different place.

This won’t affect the published site, and I don’t think there’s any point in repeatedly saving (macOS autosaves periodically in any case).

If you think the graphic really has moved, look at values in the Inspector panel, and see if they are any different. If they aren’t different, it’s a layout issue that won’t affect the published output.

Layout is complicated (the way things are displayed in the Page view) but if there is an issue, we’ll try to fix it!

WEll, here’s something interesting: I saved each page after I re-aligned the graphic elements, then went from page to page, and voila, they remained aligned.
So I closed the program and planned to see how things looked when I re-opened it, but now I get a message saying that the Xway file/doc that I spent the last two days on no longer exists.
And, in fact, it’s not to be found anywhere. This is both stunning and very disappointing. Any thoughts?
G

I’ve looked everywhere on my HD (trash, documents, my Mac Website folder), and the Xway file is gone.
The Resources folder is intact, with all the elements preserved, but all my work has disappeared, even though I pressed SAVE continuously.

kind of stunned right now…
GARY

When I try to “open recent” in Xway, the name of my file shows, but this is the message I get:

I’ve searched in every way I know how.
G

Hi Gary,

I’ve never seen anything like this happening. Do you have a backup system (e.g. Time Machine) so you can recover your document from before it disappeared?

If anything like this happened to me, one thing I would do would be to check that there aren’t disk problems (using Disk Utility).

You really shouldn’t need to save continuously, and it’s better if you don’t do this. macOS automatically saves documents from modern applications on a regular basis (maybe once a minute). It’s worth saving manually from time to time, because this creates a “version” that you can go back to; but if you continuously save, you’re just creating a very large number of “versions” that aren’t significantly different from each other.

well, my saving after working on each page seemed to stop the alignment-shifting of graphic elements.

I still have no idea what happened. my iMac is only a few months old, and it’s worked perfectly, without incident, all this time.

will let you know about Time Machine.
G

Good luck with Time Machine!

If there is a problem with graphic alignment shifting, it would be helpful if you can send us your document so we can see what is happening.

Another thing that might be worth checking is whether iCloud is involved in any way. Do you have Optimise Mac Storage turned on?

JEREMY–
FWIW, I’ve been creating and re-creating my author website for many years, using various WYSIWYG programs, and I’ve never had such a problem before.
In fact, I used both Freeway and Freeway Pro 7, with only fine results. Unfortunately, since my iMac is very new, I didn’t enable either Time Machine or iCloud, so those options are off the table.
I’m also very methodical in my work, proceeding carefully and slowly, with usually excellent results. And I know that I did hit SAVE when I closed out the Xway program yesterday. So I have no idea what could have completely deleted that website file. Which makes me a little hesitant to reconstruct it. In truth, what I should have done was save the file to my outboard HD, which I usually do.

All that said, I began recreating my original website three days ago by having Xway open the old Freeway Pro file, and worked from there.

So here’s my question: when Xway opened the old file, the text was within boxes, but graphic elements were often not. Should I then make sure that all graphic elements are within boxes when I begin again? And should I use flex boxes for everything?

thanks,
GARY

The reason I asked about iCloud is because I once lost all my notes in Apple’s Notes app (which stores notes in iCloud), and I got them back by logging out of iCloud and logging back in again. If you haven’t set up iCloud, that’s not relevant - but it might be worth double-checking that you don’t have iCloud enabled. Apple normally ask you to set it up as part or the setup process. Were you definitely saving the document on your local (Macintosh HD) drive?

Otherwise I have no idea how the Xway document could have been deleted. Apart from the Notes iCloud incident, I’ve not had anything like this happen with Xway or with any other application.

Definitely set up Time Machine. I don’t use it a lot, and I also make other backups, but it’s been helpful on a few occasions. You do need some kind of backup system.

I’m not sure what you mean when you say that graphic elements were not within boxes. In Xway graphic elements are boxes. There’s no such thing as an empty “graphic box” (as there was in Freeway). You don’t need to use flex boxes for everything. There are times when they are useful, but there are other times when they’re not needed.

If you’re coming to Xway from Freeway, it’s worth working through the introductory tutorial (there’s also a flexbox tutorial which follows the introductory tutorial and the menu tutorial). Xway defaults to creating flexible (inflow) layouts. You could do this in Freeway, but most people didn’t, and Freeway wasn’t originally designed to work like this. I’d also suggest that you avoid using absolute-positioned boxes (known as “layers” in Freeway) until you’re familiar with inflow layouts. It’s tempting to convert everything into an absolute-positioned box and move it on the page as you might have done in Freeway, but this won’t create a flexible website. There are times when absolute-positioned boxes are useful, but they should be used sparingly.

JEREMY–
It’s such a delight to work with someone who’s knowledgeable, responsive, and savvy about communicating clearly with people. Kudos to you, my friend.

As to your questions and suggestions:

  • I’ll set up a backup, to be sure. I’ve already copied the xway file I created anew and will keep updating it in my outboard HD to begin with.
  • yes, I was definitely saving the first xway file to my HD, and it’s not to be found anywhere, something I’ve never seen before.
  • I placed each graphic within a box now, and there’s no more drifting alignment issue.
  • I checked out both the Tutorial and User Notes, but found that (for me at least), on-hands learning is best, “mistakes” and all.

I feel more confident about Xway now, more familiar with its differences (from Freeway), and the result is quite beautiful. So I’m psyched, and will continue to reconstruct/improve my website.

more anon,
G

Graphics are inline elements: you can place them within a line of text, or you can have several graphics on a line without any additional text (and without using flexbox layout). You won’t be able to do that if you wrap them in container boxes, because container boxes are block elements.

How were you aligning your graphics previously? Within an inflow layout, there are two main ways of aligning graphics:

  1. The Margins and Alignment section of the Box Inspector allows you to set margins, and to change the vertical alignment (relative to text)

  2. You can set a text alignment in the Text section of the Paragraph Inspector. If you inserted a graphic that doesn’t have any text around it: 1. Select the graphic 2. Press right-arrow to select the paragraph containing the graphic, 3. Choose Left, Center, or Right alignment.

If you can send me a sample document that shows how graphics drift when they’re not wrapped in container boxes, that would be very helpful. If there’s a bug, we’d like to fix it.

Since I put them in boxes (using the margin/alignment section), I have no more drift.

Previously, they were just sandwiched between boxes after Xway imported my original Freeway website.
G

In case it’s helpful: the Xway User Guide distinguishes between container boxes (Insert Box in Xway) and content boxes (Insert Graphic, Insert Video etc.)

Ultimately, almost anything that’s on a page is inside a container box, because every page contains a root container box (the “page div”). You can type text or insert images directly within the “page div”, but mostly you don’t want to do this.

Generally, it’s better to divide the page div into sections. We recommend that people use master pages to set up a basic structure of header/main/footer, or some variation on this basic structure. The header and footer contain content that is used on all pages, while the main section contains content that is unique to each page. Sections (in this context) are container boxes that have been inserted and given an appropriate type (using the Type popup near the top of the Box Inspector).

JEREMY–
here’s a problem which has confounded me (see screenshot below):
I’ve set the below hyperlinked Page words within a separate container box, but when I go to Web Preview, their spacing all shifts. Clearly, this is not how I should be setting this up.
any suggestions?

  • also, I’m telling you this despite the fact that it makes me look pretty inept: I found my “lost” original Xway web file in TRASH - where I never thought to look.
    Still can’t explain how it ended up there, but I thought you’d want to know re the workings of Xray.

GARY

Hi Gary,

I’m glad you found your Xway document, and thanks for reporting that!

It would be concerning if an Xway document could disappear after being saved.

On the spacing issue: I’m guessing that you might have used spaces to align the titles (“Books”, “News” etc.). The reason this doesn’t work is because browsers replace multiple spaces with single spaces. [A similar issue: don’t use carriage returns to add space between paragraphs, because browsers ignore empty paragraphs: the way to add vertical space is to use vertical margins.]

[Multiple spaces and multiple carriage returns might have “worked” in Freeway, but only because Freeway converts multiple spaces into non-breaking spaces, and also adds non-breaking spaces to otherwise empty paragraphs. This isn’t a great solution, and it encourages poor layout methods.]

If you’d like the titles to be spaced out beneath the graphic, but not necessarily have them aligned with particular elements of the graphic, you could do this by using a flex container. Insert five boxes within the flex container, give them a flex value of “1” (choose “1” from the Flex popup) if you want them to be evenly spaced, and enter a separate title within each box (“Books”, “News”, “For Kids” etc.)

If you wanted the titles to be aligned with particular elements (e.g. have “News” underneath the trumpet), one way to do this might be to slice up the graphic and have each part within a separate box along with its title. But I’m not sure that this would be a good idea here: I don’t think you want to slice up the heading part of the graphic (“Gary Golio etc.”).

Instead of slicing the graphic, you could tweak the “Grow” values for each flex item so that are spaced in a way that aligns with the graphic elements. If you previously chose “1” for each item from the Flex popup, you could choose “2” for an individual flex item, and it would take up twice as much space as items that are set to “1”. Or you could type “1.2” in the “Grow” field, and it would take up slightly more space. Or you could set the Flex value for all the items to “Initial” and use percentages that add up to 100% in the Basis field.

If you use a flex container for the titles, you should leave it set so that it doesn’t wrap (assuming you don’t want the titles to wrap beneath each other). Individual titles (such as “For Kids”) could still wrap within their boxes.

When you import images into Xway, Xway sets a default maximum width of 50% (this avoids layout problems if the image is large), but you may wish to remove this or set it to a different value. If you want the image to expand to the width of its parent (possibly the page div), you could give it a width of 100%. You might also give it a maximum width (e.g. 768px) and a minimum width (e.g. 300px). We recommend designing pages so they can be displayed on any device that is 320px or wider, so a minimum width of 300px works within that limit, and allows for some extra spacing.

A good way to test flexible websites is to use Safari’s Responsive Design mode: see page 184 of the current user guide, near the top, for more information.

wow, this is a lot of in-depth info.
so yes, I want to keep the titles beneath certain elements (like the guitar, etc.), but I also want those titles to be linked to those titled Pages, as could be done in Freeway.

Given the complexity of your suggestions, I’m hoping to find a simpler method using xway. I’ll keep you posted.

thanks mucho,
G