Affinity Publisher: Inconsistent preview dimensions

[Pyanepsion]

Hello everyone,

When creating a page in A0 format, first in vertical orientation and then in horizontal orientation, I noticed that the previews did not respect the expected proportions.

For example, the thumbnail on the second page should measure 255×354, but it does not. This creates confusion when viewing and selecting pages with more than one format.

Please do not hesitate to contact me should you require any further information.

inconsitent-preview-dimensions.afpub

[MikeTO]

I can't duplicate this on macOS and I'm not even seeing it in your screenshot. You measured the selected thumbnail (#1) which has a border around it. You should compare unselected portrait and landscape thumbnails and then I think you'll see they are the exact same sizes.

However, landscape thumbnails can appear significantly larger than portrait thumbnails in the panel. This is by design but perhaps this is the issue you wanted to report?

There is a minor bug in the thumbnail size calculation that leads to thumbnails sometimes being smaller than they should be, and once it happens it can't be undone even if you change the page size back or close and re-open the panel. It doesn't impact the aspect ratio of the thumbnails so it's not your issue. I haven't bothered reporting this issue because it's so trivial.

[Hangman]

Hi @Pyanepsion,

Affinity Publisher is using a consistent height for each page/spread thumbnail which personally I think makes sense., e.g., when viewed using large icons I see an:

• A0 Landscape page as 298 px x 211 px
• A0 Portrait page as 148 px x 211 px

If it were to maintain 'actual' A0 proportions you'd end up with either of these two options, Middle and Right depending on whether you based the thumbnail on a portrait or landscape page, i.e., non-equidistant thumbnail spacing vs the current equidistant thumbnail spacing which I'd imagine from a programming perspective is far easier to implement...

[MikeTO]

@Hangman Just FYI, I originally wrote a much longer reply explaining how the thumbnail generation algorithm works but it's complicated. The thumbnail size isn't fixed at those sizes, it depends on whether or not the document is facing pages and whether there are other pages in the document with certain aspect ratios. This is where there's a minor bug in the thumbnail sizing. For example, the thumbnails for the square page 1 below are all medium size but the size depends on whether the doc is facing pages or includes other pages with certain aspect ratios.

This will all change when multi-page spreads are introduced.

  

[Hangman]

@MikeTO, thanks for that...

I see your point though (I've not tested it further yet) but are the page/spread thumbnails not always equidistant regardless of their page/spread size?

I guess it all depends on the point of reference considering the criteria, i.e., page/spread size, mixed page/spread size, single or facing pages... which do you use as the default reference for sizing all other thumbnails?

Agree, that more consistency would be beneficial, e.g., the sizing between Small, Medium and Large thumbnails makes little sense, specifically between Small and Medium but do you have equidistant thumbnail spacing or proportional page-specific spacing?

[Pyanepsion]

Thumbnail layout

After a bit of research, here's how I'd go about arranging thumbnails of different widths and lengths harmoniously in a column layout:

1. Uniformity of width (See the discussion below on opting for constant width or height):

—Choose a fixed width for all the thumbnails to create visual consistency. This keeps the vertical line clean and aligned.

2. Variable but proportional height:

—Let the height of the thumbnails vary according to their content, but make sure that the proportions between width and height remain harmonious. For example, if one thumbnail is twice as wide as another, its height could also be proportionally adjusted.

3. Consistent spacing:

—Ensure that the spacing between thumbnails is consistent. This creates a pleasing visual rhythm and prevents the presentation from appearing (falsely) disorganized.

4. Use of margins:

—Add margins around the thumbnails to give a little air and prevent the whole thing from looking too packed together. Margins can also contribute to a harmonious appearance by creating regular spaces.

5. Visual hierarchy:

—If some thumbnails are more important than others, we can play with their size (particularly their height) to create a visual hierarchy. Larger thumbnails will naturally attract more attention.

6. Alignment:

—Ensure that the thumbnails are properly aligned to the left, centre or right, depending on the desired style. Good alignment contributes greatly to the perception of order and harmony.

7. Playing with colours and textures:

—If the thumbnails have different colours or textures, try to arrange them so that the colours complement each other or create a pleasing contrasting effect.

8. Flexible grid:

—As here, use a flexible grid (like the one used in adaptive design) to organize the thumbnails. This maintains a certain structure while adapting the layout to the different sizes of thumbnail.

By following these principles, we should be able to create a harmonious presentation, even with thumbnails of varying sizes.

How to choose a constant size?

It is important to choose an approach that guarantees visual consistency and harmony, regardless of how the pages are oriented. The question of differentiating the layout according to the initial orientation of the document is relevant, but it is not necessarily necessary if a consistent strategy is adopted that works for both orientations.

Consistency strategies independent of the initial orientation of the document:

1. Width uniformity:

—Advantages:

o By choosing a constant width for the thumbnails, we ensure visual consistency across all pages of the document, whether they are in vertical or horizontal mode.

o This ensures continuity in the layout when the user moves from a vertical to a horizontal page, as the column width remains the same.

o This approach is particularly useful if the content is mainly text or vertically oriented, such as blocks of text or images with a larger vertical dimension.

—Disadvantages:

o On horizontal pages, where there is more space in width, the thumbnails can appear a little too narrow, which may not fully optimize the space available.

2. Uniform height:

—Advantages:

o By opting for a constant height, we ensure that thumbnails maintain a consistent skyline across all pages, making reading and the user experience easier, especially if the thumbnails contain images or graphic content.

o This approach works well if the document is designed to be browsed horizontally (such as in a presentation or online catalogue), as variations in width are less disruptive than variations in height.

—Disadvantages:

o On vertical pages, where there is more space available vertically, the thumbnails could appear too small compared to the space available, which could give an impression of emptiness.

Differentiate according to the initial orientation of the document:

1. Initial document in vertical mode:

—If the document was initially created in vertical mode, it might be wise to favour a constant width to maintain consistency with the main orientation. This would make it possible to adapt the pages in horizontal mode simply by using the extra space to extend the content horizontally, without changing the alignment of the thumbnails.

2. Initial document in horizontal mode:

—If the document was created in horizontal mode, opting for a constant height could be more natural, as it would ensure that the vertical pages continue to function harmoniously by respecting the height defined in the main orientation. Pages in vertical mode would then simply use the extra space in height, without affecting overall consistency.

Conclusion:

For a document containing pages in both vertical and horizontal mode, it is generally best to choose a strategy that works well regardless of the initial orientation of the document. Width uniformity tends to be most consistent for documents where the verticality of text or columns is predominant, whereas height uniformity may be better suited if the document contains graphical elements or images that need to be aligned horizontally in a consistent manner.
If the aim is to maximize harmony and fluidity between the different pages of the document without having to differentiate according to initial orientation, width uniformity is often a more versatile and effective option for maintaining a consistent visual structure throughout the document.