We’ve released an update to Xara Web Designer, available now. If you have an active Update Service then this update is free, otherwise you can upgrade / renew your Update Service on magix.com.NOTE: To update to 16.0 you will need to re-download Web Designer, as there is no auto-update. You can un-install your current version or run it alongside if you prefer, and it uses the same serial number.Scroll through this document to see a description of all the changes and new features, or click the links below as a short-cut to any topic of interest. Once you have v16 or the v16 trial installed you can download a demo doc for some of the new features (including color palette from photo and auto-fitting text) here. You can find these Release Notes in German here.
OpenType Improvements (Premium only)
The Advanced Text Tool InfoBar has had the following changes:•Ligatures and Stylistic Sets options separated into two separate buttons and menus•Addition of Text Capitalization button and menu•Addition of Contextual Alternates toggle button
Dynamic On-Canvas Preview (Premium only)
Now when you select some text and move your mouse pointer over the different options in the Ligatures, Stylistic Sets and Text Capitalization menus, your text will update dynamically to show you a preview of what the option will do. This makes it easier to see the effects the different options will have on your text, if you choose to apply them.
Contextual Ligatures (Premium only)
Earlier versions of Designer recognize sequences of two or more characters that can be replaced by a single ligature glyph that is provided by the font for that particular character combination. or example with ligatures switched on the two character sequence could be replaced by the single ligature glyph .But OpenType also includes more complex substitution rules to determine which ligature glyphs should be used, where the substitution depends not only on the actual characters replaced but also on the context in which those characters appear. So the actual ligature used for a given character combination may vary depending on what characters precede and follow the combination that is replaced. The option to turn on Contextual Ligatures is an addition to the Ligatures menu in v16. In the following example, with Contextual Ligatures on the character pair “ft” appears using a different glyph, depending on the other characters around it.
Contextual Alternates (Premium only)
Some fonts provide alternative glyph designs for the same ligatures. Use the Contextual Alternates toggle button on the InfoBar to turn the alternates on and off for any character selection. In this example you can see the different glyphs used in the same word, one with Contextual Alternates off and one with it on.When you change this option, if you don’t see any differences in the selected text that’s because the font you are using doesn’t have any alternates for the characters you have selected.
A powerful new option makes it easy to fit any text into any required shape or area. It automatically resizes the text to ‘best fit’ into the area or shape.Some common uses:Instead of having to manually adjust the font size in order to fit the text into this shape, just turn on the new ‘Auto-fit to Container’ feature and type away. What you type will automatically be sized to fit.The option is part of the Vertical Align control which is on the extended Text InfoBar.The Vertical Align icon is part of the extended Text Tool InfoBarWith this option on, the font size of the text is automatically adjusted so that the text will just fit into the available space. Add more text and the font size reduces, so the text will still fit. Remove some text and the
font size grows so the text will still fill the container. It works with simple text areas …And also with text fitted into any shape …To place text inside a shape, such as these, select the shape and then in the Text Tool click on the shape. You will see a new dialog which gives you multiple options:If you have text already in a shape (or text area) you can turn on the Auto-fit feature by accessing the option under the vertical align icon described above:
Relative Text Sizing
You can use mixed font sizes too, just as you would in a normal Text Area. As you add and remove text, the text scales to fit, while always preserving the relative difference between the font sizes in the text.
Although the absolute point size is mostly meaningless (because the text is dynamically resized) the system does retain the relative size differences of text within the text area being fitted. This is very powerful and enables a mix of font sizes, as shown above. You can select any portion of text in the usual way, and then adjust the point size, to see the change relative to the rest of the text in the area.In the example above if we try to make the heading 28pt, it immediately changes to 24.19pt, but that’s expected with auto-fit turned on.Dynamic sizing also works with repelling. The text automatically scales to fit the available space, taking into account the reduced space caused by the repel.
Detaching Text Inside
If you have text inside a shape and want to detach it, so it’s now floating separately, there’s a new Detachoption on the Text inside context menu. Right click on the text to access this.
New Case Options
The Text Tool Advanced text bar now includes these new options:
The options in the top section of the menu are all text settings, (that is, a text attribute so they act like Bold and Italic) so that subsequent editing maintains the case setting you’ve chosen. These settings also work with text styles, just as all other text settings do, so for example you can define a heading style to always appear in capitals by applying ALL CAPS and then updating the style definition.As TypedThis is the default setting for all text, the case remains as whatever you typed. ALL CAPSText is always all upper case, whether it was typed as upper or lower case.all lowerText is always all lower case, whether it was typed as upper or lower case.Initial CapsThe first letter of each word is capitalized. Small CapsCharacters that were typed as lower case are shown as small upper case characters. Characters that were typed as upper case will appear as normal, so slightly larger (as you can see in the Small Caps heading above).Some OpenType fonts include special character glyphs for Small Caps and if the font you are using does, Designer will use them, so you will see Small Caps text appear exactly as the font designer intended. If the font you are using does not provide its own Small Caps character glyphs, Designer will use the font’s ordinary upper case characters, but at a reduced size. Therefore you can safely use this option with any font, whether or not the font has Small Caps support.Toggle caseThis option is shown in a separate section of the menu because unlike the other options above it is not a setting - it simply toggles the case of each letter in the selected text.
Embedding & Anchoring in Repeating Objects
Designer now allows text that is Repeating, such as header and footer text that appears on every page of a document, to include embedded graphics. Also objects can be anchored to repeating text.
Color Palette From Photo
A technique many professional designers use to enhance the look of documents is to tie the colors used in design elements to the colors used within a photo of that document. In this way the whole document is given a more harmonious, attractive color scheme.Designer 16 includes a powerful new tool that will analyze a photo, identify the predominant colors in the image, and create a color palette of those colors with the names ‘Theme Color 1’ to ’Theme Color 5‘. By using these Theme Colors in your document, and linked shades of these colors, you can create a document that can automatically take on the colors of any photo in the document.Below is an example that shows how effective this can be. This page has been designed to use the standard Xara theme colors that work with the Palette from photo feature. Each of the 3 versions of the page has had the photo changed and then Palette from photo invoked to update the document’s colors to match those of the photo. In all other respects these 3 designs are identical. To use this feature, simply select the photo you want to use to set the document colors, then click the last icon on the end of the Photo Tool flyout bar.Designer instantly analyses the photo and chooses up to 5 of the most predominant, but independent colors (very similar shades of the same color are considered as a single color). It uses these to set the values of the named colors Theme Color 1 to Theme Color 5. If these colors are already in your document,
as they probably will be if you used a Xara template, they are updated. Otherwise they are added and you will see them appear at the bottom left of your color bar.The 5 theme colors for each of the 3 examples above - together with 4 lighter and darker linked shades.
Using Theme Colors
The color analysis is quite sophisticated. It’s based on a heuristic that determines the predominant colors based on their brightness, and coverage area. It automatically combines similar shades. For example, a blue sky typically contains many lighter and darker shades of the same blue hue. So this would be created as a single blue color. It also adjusts the brightness of Theme Color 1 and 2 (the two most predominant colors) so it always provides a good contrast against a white page background. This means you can always use ’Theme Color 1’ as a heading color on a white page, for example, and it will be readable. Or, alternatively you can place white text on Theme Color 1 or 2, perhaps on a colored rectangle of Theme Color 1 or 2, and that text will also always be readable.It’s always good design practice to limit the number of different colors (as it is to limit the number of different fonts and font sizes) within a document. But the use of shades of your predominant color is to be encouraged. To help make the use of lighter and darker shades, the program creates two linked paler, and two darker shades of each of the Theme Color 1 to 5 colors. You can see in the above examples the use of brighter and darker shades of Theme Color 1 and 2.When there are limited numbers of significant colors in the image, the program uses shades of gray for the higher Theme Colors.
Another common technique designers use is to link the main text color to the predominant theme color, although obviously this needs to be dark enough to provide contrast to be legible. Therefore the program also creates a named color called ‘Text’ that could be used for the body text of your document.
You can customize the named colors in the usual way. Right click on the color patch on the color line, and select Edit.
Extracting Colors From Logos
This feature also works from any image including transparent PNGs so, for example, if you add a company logo graphic to your page that includes your brand colors, you can automatically set the Theme Colors to match those used in your company logo.
New Pie Chart SmartShapes (Premium only)
The charts section of the Online Content Catalog now includes pie charts. These offer a super-easy way to create a high-quality vector pie charts, with the program automatically calculating the correct percentages for each pie slice.Key features include:•You can adjust the pie segment values three ways:oBy dragging directly on pie segment handles to adjust the % size of each slice.oBy using a Data Input Form to the enter a simple column of numbers, with optional labelsoBy pasting CSV data into the input form, say from a spreadsheet.•You can display the values as a percentage or absolute value.•It automatically positions the labels around the pie, using a common text style. Edit one label style and they all change to match (although you can apply different styles to each label if you wish).•You can ‘pull out’ to highlight any one segment simply by clicking on it, as shown above.•The segment colors are based on the Theme Colors used in your document (Theme Color 1 to 5 and then shades) so the pie chart will match your document color theme.•Or you can easily customize the color of any segment.There are some ready-made Pie Charts available if you select the menu Insert > Charts.As usual the handles on the SmartShape show a tooltip that tells you what each does.To display the Data Input Form, click the green handle top left of the SmartShape. It will open up an input area on the right side of the Pie Chart, like this:
Shows the Data Input Form area. You can show / hide this using the green handle top left. Using the Text Tool click in the lower data input area and type label, value pairs as required. As you edit this the pie chart is updated live. Each time you add a new entry on a new line, a new pie segment is created.You can also drag the handles on the edge of the pie slices and the corresponding data values change in proportion. The % indicator on the top right changes the values displayed on the pie from absolute values to percentage values.As with all the SmartShapes, hover over the adjustment handles to see a function description.
Pasting CSV Data
You can paste properly formatted CSV (Comma-Separate Values) data in the form area. It has to be formatted like thislabel, value <newline>up to a maximum of 15 entries. This supports data copied from Excel and Google spreadsheets. Just make sure you paste the data as ‘unformatted text’. A few tips that can be useful ensuring the data is accepted.•If you want to use spaces or commas in the label, surround the label text in single or double quotes•You can use either a comma or a tab as a separator•The label is optionalSo if you have a spreadsheet in the form:29 May 2018$234.501 Jun 2018$1230.006 Jun 2018$678.0023 Jun 2018$1,234.001Sep 2018$1,256.00This would not work when pasted because the labels contains values, the values are shown with dollar signs, and formatted with commas, as is common for monetary values. However a bit of tweaking will make
this data display correctly,‘29 May 2018’, 234.50‘1 Jun 2018’, 1230.00‘6 Jun 2018’, 678.00‘23 Jun 2018’, 1234.00‘1 Sep 2018’, 1256.00Which will display this. It has the 4th segment highlighted.
Coloring the Pie Chart
The pie segments use Theme Color 1 to 5 for the first five segments, and then lighter and darker shades of these colors for the next ten segments. If your document contains more than five slices, it will use lighter and darker shades of Theme Color 1 to 5 for the next ten segments. If you do not have any Theme Color defined, the slice will appear black and you will have to manually color the segment.To color any segment, first click it (this will pull out the selected segment), and now click a color on the Color Line.
Editing Label Text
If you change the whole text of any label e.g. the color, font or size, they all change to reflect this. To change an individual label, give it an alternative Text Style. You’ll notice labels on the left side are left aligned.If you want to change the relative size of the pie to the text, use the orange Radius handle to resize the pie.
One of the most popular graphic elements is the arrow. Xara Designer includes perhaps the most flexible, yet simple-to-use arrow tool - the Arrow SmartShape. And we’ve made a number of improvements in this release.
The great thing about the Arrow SmartShape (and this applies to all SmartShapes) is that there’s no complex arrow tool to learn - the arrow is controlled by dragging a few handles on the shape. So creating and customizing an arrow is an interactive, visual experience.We provide a library of pre-set designs, which can be customized as required. Use the menu Insert > Shape > Arrows… to insert an arrow. Some examples:
•The arrow shaft is a line, rather than a filled shape. This means it’s now possible to apply any line effects such as dash or line profile. You can use the standard line End Cap control to control whether the dash lines have rounded caps or square caps.•Hold Shift to resize or rotate around center. E.G. to make a line wider, but remain centered where it is, use Shift and drag outwards.•It snaps to 45° angles by default. Use Ctrl to un-snap.•Shift on the orange handle to produce a balanced (symmetrical) curve.•It shows the angle now, from either end. Interactive, live as you drag. And now also length (when straight line only) is shown in the current page units.•Unlike legacy (non SmartShape) arrows the line length includes the space for head / tail•New Flat head design. Use the Line style Round Cap control if you want this rounded.•Accepts and shows the correct line width via the standard line width control.•Updated and improved head / tail handle (easier to click through styles, better position).•Fixed bugs with transformed arrows (behaves better when changing page size or when transformed as part of a group).
Drag to adjust the size of the whole arrow.
Drag to adjust the line width
Drag to curve the line
You can adjust the tail size independently
Click the green handles either end to adjust the head or tail style. Or drag to scroll through the options.
There’s also a new flat line end style, as shown in the first example above. Change the style of each end of the arrow by dragging on the green style handles. Existing arrows in your document will instantly update to to the new versions as soon as you start editing them. Note that the arrows selection in the Online Content Catalog includes some different types of arrows where the head and shaft are formed from a single shape e.g. these These arrows have not changed as they work differently and are of an entirely different design.
Tables are powerful but usually very complex structures. Table editing usually has complex user-interface controls, dialogs, menus and dozens of options (See Word). We have tried to create a ‘visual table editing’ experience, where we avoid dialogs and numeric controls as much as possible. Instead you use drag and drop to arrange your table, to add or remove rows and column, to adjust the width or height of rows and columns or the whole table, to re-arrange rows, to adjusting the spacing, cell padding - in a fluid, direct feedback manner.The Table SmartShape has undergone significant improvements with this release. In Summary:•Improved usability - better handles, more obvious controls, handle tooltips.oNew handles on right and lower edges of the table, to add / remove rows or columns or to stretch resizeoResizing a column or row now pushes the remainder of the table along. Hold Shift to just resize the column (or row) within the table.•Improved, easier, cell selection and display. It shows a blue line around the selected cells.•You can select ranges of cells using standard Ctrl and Shift keys.•Easier color application to the selection.•Merge cells, and Un-merge to restore back to grid.•Drag a row or column away (left or up) to delete a row.•Border control: The ability to draw individual edge lines, top, right, bottom and left side of the cell (or selection of cells).•Paste tab delimited text data to quickly populate a table - so in Excel for example: oSelect and copy cells oIn Designer place the text cursor in the top left cell of the destination table - make sure the cell is empty. oPaste using the ‘Unformatted Text’ option.•Inner and Outer padding control. Inner padding allows you to space all cells vertically or horizontally apart.
Cell, row and column selection
You can select a cell by just clicking on it. A blue outline shows the selected cell or range of cells. You can use Shift and Ctrl keys when selecting cells to extend the range in the usual manner.To select a row or column click the orange handle at the top or left end of the column or row.Once you have a selection you can apply attributes such as colors (background, outline or text) or text attributes such as font, size etc.You can use the new ‘Auto-fit to container’ feature in table cells, so the text will scale as you adjust the size of the cell via the row or column adjustment.
Coloring a selection
You can set the colors of the cell background, cell outlines or text in three ways:1.Right click on a color on the color line and select to apply the fill color, or line color (use the standard Line Width control to set the line width around the cell). 2.Or, just click on a color patch on the color line. This will display the ‘group color picker’ which displays all the elements in the selection and asks you to select which you color you want to replace.3.Or, you can bring up the color editor, (Ctrl+E) and use the top drop-down menu to select which color parts of the selection (background, lines, or text) you want to edit.
Border Control and Merge / Un-merge
When you select a cell, range of cells, row or column a extra green handle top left of the selection. Clicking this display the Border Control UI as a small pop-up:The first 4 controls represent the four edges of the selected cells. You can click to highlight any, or all, of them. In the above case the right edge is highlighted. If you now adjust a line value, say to select a line width of 2pt, it will apply the line to the right edge of the selected cells.Note: only while the Border Control UI is visible does applying line values affect the selected edges. if you close the border control, then applying a line width, or line colour, it will apply to all 4 edges of the selection.
Merging and Un-merging Cells
A common feature of spreadsheets is the ability to merge adjacent cells into a single larger cell. For example you might want a heading to span across two or more columns. To do this select two or more adjacent cells, bring up the Border Control UI with the green handle, as above, and click the Merge Cell icon.Any merged cell can be restored back to its original un-merged state, but clicking the same control again.
To Duplicate a Row or Column
There’s no direct way to copy or paste a whole row or column at present (future updates will provide this ability). In the meantime there is a work-around. Dragging the right or bottom edge orange handle duplicates the last row or column. So to duplicate any required row or column, just drag it to the end of the row or column, (with the row or column select handle) and then extend the table, and drag the now duplicated row or column to the desired position.
To Delete a Row or Column
Drag the row or column orange select handle outwards, away from the table. At a certain distance a red cross will appear, if you now let go, the row or column will be deleted.
•3 new Cards in Print > Cards & Invites (Birthday Invitation, Newborn Card & Wedding Invitation)•4 new Pie Charts in Components > Print & Web Components > Charts (Pie Chart 1 – 4)•2 new Smart Tables in Components > Print & Web Components > Tables (11 and 12)•6 new Arrow Designs in Components > Print & Web Components > Arrows (Smart Arrow 1 – 6)
•Improved recognition of bold, Italic & underlined text (due to improved character recognition).•More accurate line spacing handling, reducing the chances of overlapping text. •Improved object recognition: more vector elements and improved color import. •Better compatibility with Word-created PDFs. •Improved support for OpenType font features and ligature import.•Text paragraph reconstruction improved (fewer inserted newline characters at the end of lines to achieve the correct line break positions).•Better matching of fonts used in the PDF to locally installed fonts, improving editability. •Bug-fixes.
PowerPoint Import (Premium only)
•Import of tables as Xara tables.•Improved handling of background objects imported to the Page Background layer.•Exclusion of redundant invisible lines and shapes.•Bug-fixes.
Word Import 9 (Premium only)
•Auto-grow text boxes are imported as Xara Text panels.•Support for embedded objects in headers/footers.•Bug-fixes.
Word Export (Premium only)
•Export of tables as Word tables (excludes embedded tables which are currently exported as images).•Bug fixes.
NEW: PowerPoint Export (Beta, Premium only)
Presentations can now be exported as PowerPoint files (.pptx). Used font subsets are embedded in the exported document so that it can be viewed on systems that don’t have the fonts installed.