Create the document zoom

This guide describes how to offer the author ways to change the text and/or document size.

The way in which documents are displayed in FontoXML can be controlled in two ways: changing the size of the text and changing the width of the documents.

The former enables people to read the text more easily by making it larger. The latter can be used to fit more text or wider structures in the horizontal space of a document.

Both can be combined into a third, which effectively zooms all documents.

Changing the size of the text

The size at which the text is displayed can be set through five operations named set-content-view-text-size-to-…. The predefined levels of text size that are supported out of the box are 75%100%125%150%, and 200%. Replace the ellipsis in the operation name with one of these percentages.

Remember that this only sets the size at which the text of documents is displayed in the editor. It has nothing to do with the size at which text will be published; nothing changes in the XML.

Provide this functionality by adding a FxMultiOperationsButton to the toolbar.

<FxMultiOperationsButton
	operations={[
		{ operationName: 'set-content-view-text-size-to-75%' },
		{ operationName: 'set-content-view-text-size-to-100%' },
		{ operationName: 'set-content-view-text-size-to-125%' },
		{ operationName: 'set-content-view-text-size-to-150%' },
		{ operationName: 'set-content-view-text-size-to-200%' }
	]}
/>

Changing the width of the documents

The width of the documents in a project can be set through five operations named set-content-view-document-width-to-…. The predefined levels of document width that are supported out of the box are 75%100%125%150%, and 200%. Replace the ellipsis in the operation name with one of these percentages.

Remember that this only sets the width at which the documents are displayed in the editor. It has nothing to do with the width of the paper on which the documents will be published; nothing changes in the XML.

Provide this functionality by adding a FxMultiOperationsButton to the toolbar.

<FxMultiOperationsButton
	operations={[
		{ operationName: 'set-content-view-document-width-to-75%' },
		{ operationName: 'set-content-view-document-width-to-100%' },
		{ operationName: 'set-content-view-document-width-to-125%' },
		{ operationName: 'set-content-view-document-width-to-150%' },
		{ operationName: 'set-content-view-text-size-to-200%' }
	]}
/>

Large document widths on narrow screens may result in the document being overlapped by an open side panel, or even extending beyond the edge of the window. A horizontal scrollbar will appear to let authors bring their cursor back into view. When typing, browsers may scroll automatically as well.

Changing the width of a document when the use-embedded-mode is true does nothing. (Since the use-embedded-mode forces a full width content view anyway).

The zoom operations below automatically don't change the width of the document if use-embedded-mode is true (then they only make the text of the content view bigger or smaller). This is why the zoom operations are preferred over using the document width or text size operations directly.

Changing both: zooming documents

Combining the operations to set the text size with those that set the document width result in operations that zoom the documents. The zoom-content-view-to-... operations are preconfigured to do just that.

Provide this functionality by adding a FxMultiOperationsButton to the toolbar.

<FxMultiOperationsButton
	operations={[
		{ operationName: 'zoom-content-view-to-75%-75%' },
		{ operationName: 'zoom-content-view-to-100%-100%' },
		{ operationName: 'zoom-content-view-to-125%-125%' },
		{ operationName: 'zoom-content-view-to-150%-150%' },
		{ operationName: 'zoom-content-view-to-200%-200%' }
	]}
/>

Large zoom factors on narrow screens may result in the document being overlapped by an open side panel, or even extending beyond the edge of the window. A horizontal scrollbar will appear to let authors bring their cursor back into view. When typing, browsers may scroll automatically as well.

Was this page helpful?