# Viewing and Printing > Control how the Document Editor shows documents: page view, zoom, ribbon, rulers and status bar, control characters, colors and printing from JavaScript. - **Product:** TX Text Control .NET Server - **Section:** Documentation - **Kind:** Topic - **Path:** TX Text Control .NET Server > Document Editor > Viewing and Printing - **5268 words** - **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/viewing-printing/ - **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/viewing-printing/llms.txt - **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/viewing-printing/llms-full.txt --- A compact editor without rulers or an editor that shows formatting marks: how the Document Editor displays documents is up to your code. It controls the view mode, the zoom factor, the ribbon bar, the rulers and the status bar, control characters, marker lines, colors and printing. The examples extend the view of the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt) tutorial. Changing the ribbon itself, the context menus and the language of the user interface is described in [Ribbon and UI](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/llms-full.txt). ### View Mode and Zoom [setViewMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setviewmode-method/llms-full.txt) sets one of the two values of [ViewMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/viewmode-enumeration/llms-full.txt): | Value | Shows | |---|---| | `PageView` | Separate pages with gaps between them on a background, with headers and footers | | `Normal` | The text formatted for the page size and margins; headers and footers can be inserted, but aren't displayed | The page collection of the API, `TXTextControl.pages`, is only available in the page view. Users switch these settings on the **View** tab of the ribbon: **Draft** and **Print Layout** in the **Document Views** group, the zoom in the **Zoom** group, the rulers and the status bar in the **Toolbars** group, and the marker lines, control characters and frame anchors in the **Show** group: ![View tab of the Document Editor ribbon with the groups Document Views, Zoom, Toolbars and Show](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/view-tab-ribbon.4633aec9.webp) [zoom](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/zoom-method/llms-full.txt) sets the zoom factor in percent, or to a value of [SpecialZoomFactor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/specialzoomfactor-enumeration/llms-full.txt): `PageWidth` fits the width of a page, `WholePage` the whole current page and `TextWidth` the complete text of a line. The editor raises `zoomFactorChanged` with the new factor when the zoom changes. The `zoomFactor` property is obsolete. ### Ribbon Bar, Rulers and Status Bar [showRibbonBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/showribbonbar-method/llms-full.txt), [showHorizontalRuler](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/showhorizontalruler-method/llms-full.txt), [showVerticalRuler](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/showverticalruler-method/llms-full.txt) and [showStatusBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/showstatusbar-method/llms-full.txt) show a bar with `true` and hide it with `false`. They have no callbacks, and there are no methods that return whether a bar is visible, so your code keeps track of the state itself. The following code switches the view mode, zooms, shows control characters and shows or hides all bars. Add it below the editor in *Views/Home/Index.cshtml*: ```html ``` - [getViewMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/getviewmode-method/llms-full.txt) passes the current view mode, which `toggleViewMode` switches. - [getControlChars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/getcontrolchars-method/llms-full.txt) and [setControlChars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setcontrolchars-method/llms-full.txt) read and set whether control characters, such as paragraph marks and tabs, are visible. - The `show` methods take the visibility as their only parameter. #### Customize the Rulers and the Status Bar [TXTextControl.rulerBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/rulerbar-property/llms-full.txt) and [verticalRulerBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/verticalrulerbar-property/llms-full.txt) return [RulerBarViewGenerator](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgenerator/llms-full.txt) objects, and [TXTextControl.statusBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/statusbar-property/llms-full.txt) a [StatusBarViewGenerator](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/llms-full.txt). Among other things, they set: - the unit of a ruler, `Millimeter`, `Centimeter`, `Inch` or `Auto` for the unit of the culture ([setScaleUnit](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgenerator/setscaleunit-method/llms-full.txt)) - whether users can change formatting and page margins with the ruler ([setReadOnly](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgenerator/setreadonly-method/llms-full.txt), [setEnablePageMargins](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgenerator/setenablepagemargins-method/llms-full.txt)) - the areas of the status bar, such as the page, line, column, section, language and zoom ([setShowPage](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowpage-method/llms-full.txt), [setShowZoom](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowzoom-method/llms-full.txt)) - a zoom slider in the status bar ([setShowZoomTrackBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowzoomtrackbar-method/llms-full.txt)) and the insert or overwrite state ([setShowKeyStates](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowkeystates-method/llms-full.txt)) - the colors, through their `displayColors` properties Since version 33.0, the border style, the frame color and the gradient back color of the status bar can't be changed; their methods are obsolete. #### Show Areas and Change Labels of the Status Bar Each area of the status bar has a `setShow` method that takes `true` or `false`, and a `getShow` method that passes the current value to a callback: | Method | Area | |---|---| | [setShowPage](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowpage-method/llms-full.txt), [setShowLine](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowline-method/llms-full.txt), [setShowColumn](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowcolumn-method/llms-full.txt), [setShowSection](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowsection-method/llms-full.txt) | The page, line, column and section number of the input position | | [setShowPageCounter](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowpagecounter-method/llms-full.txt), [setShowSectionCounter](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowsectioncounter-method/llms-full.txt) | The number of pages and of sections in the document | | [setShowLanguage](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowlanguage-method/llms-full.txt) | The language of the selection or of the text at the input position | | [setShowZoom](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowzoom-method/llms-full.txt), [setShowZoomTrackBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowzoomtrackbar-method/llms-full.txt) | The zoom factor, as a number or as a slider that also sets it | | [setShowKeyStates](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setshowkeystates-method/llms-full.txt) | Insert or overwrite mode, added in version 34.0 | Six methods replace the text of an area. [setPageText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setpagetext-method/llms-full.txt), [setLineText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setlinetext-method/llms-full.txt), [setColumnText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setcolumntext-method/llms-full.txt), [setSectionText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setsectiontext-method/llms-full.txt), [setPageCounterText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setpagecountertext-method/llms-full.txt) and [setSectionCounterText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/setsectioncountertext-method/llms-full.txt) set the text of the page, line, column, section, page counter and section counter areas; the `get` methods of the same names pass the current text. The following lines show a shorter status bar with its own labels: ```javascript TXTextControl.addEventListener("textControlLoaded", function () { var statusBar = TXTextControl.statusBar; // Show the page, line and page count only statusBar.setShowColumn(false); statusBar.setShowSection(false); statusBar.setShowSectionCounter(false); statusBar.setShowLanguage(false); // Labels of the remaining areas statusBar.setPageText("Pg"); statusBar.setLineText("Ln"); }); ``` #### Change the Colors of the Rulers and the Status Bar By default, the rulers and the status bar take their colors from the system colors of the server. `displayColors` of a ruler returns a [RulerBarViewGeneratorColors](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/llms-full.txt) object, and `displayColors` of the status bar a [StatusBarViewGeneratorColors](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/llms-full.txt) object. Their `set` methods take a CSS color string, each `get` method passes the color to a callback, and each `reset` method restores the default: | Object | Methods | Color | |---|---|---| | `RulerBarViewGeneratorColors` | [setBackColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/setbackcolor-method/llms-full.txt), [setGradientBackColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/setgradientbackcolor-method/llms-full.txt) | The background at the left or top edge, and at the right or bottom edge of the ruler | | | [setRulerColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/setrulercolor-method/llms-full.txt), [setForeColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/setforecolor-method/llms-full.txt) | The ruler, and its numbers | | | [setSeparatorColorDark](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/setseparatorcolordark-method/llms-full.txt), [setSeparatorColorLight](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/rulerbarviewgeneratorcolors/setseparatorcolorlight-method/llms-full.txt) | The dark and the light separators | | `StatusBarViewGeneratorColors` | [setBackColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/setbackcolor-method/llms-full.txt) | The background at the left edge | | | [setBackColorTop](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/setbackcolortop-method/llms-full.txt), [setBackColorMiddle](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/setbackcolormiddle-method/llms-full.txt), [setBackColorBottom](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/setbackcolorbottom-method/llms-full.txt) | The background at the top, in the middle and at the bottom | | | [setForeColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/setforecolor-method/llms-full.txt) | Text and numbers | | | [setSeparatorColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/setseparatorcolor-method/llms-full.txt) | The separators, added in version 33.0 | [StatusBarViewGeneratorColors.reset](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgeneratorcolors/reset-method/llms-full.txt) and [StatusBarViewGenerator.resetDisplayColors](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/statusbarviewgenerator/resetdisplaycolors-method/llms-full.txt) restore all colors of the status bar at once. The frame color, the gradient back color and the dark and light separator colors of the status bar are obsolete since version 33.0, when `setSeparatorColor` was added; they are listed on [Deprecated APIs](https://docs.textcontrol.com/tx-text-control-dotnet-server/whats-new/deprecated-apis/llms-full.txt). ```javascript TXTextControl.addEventListener("textControlLoaded", function () { // A light gray horizontal ruler with dark blue numbers TXTextControl.rulerBar.displayColors.setBackColor("#F2F2F2"); TXTextControl.rulerBar.displayColors.setGradientBackColor("#F2F2F2"); TXTextControl.rulerBar.displayColors.setForeColor("#1F4E79"); // The same colors for the status bar TXTextControl.statusBar.displayColors.setBackColor("#F2F2F2"); TXTextControl.statusBar.displayColors.setForeColor("#1F4E79"); }); ``` ### Control Characters, Marker Lines and Grid Lines - **Permanent control characters.** [setPermanentControlChars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setpermanentcontrolchars-method/llms-full.txt) sets control characters that are always shown, with values of [PermanentControlChar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/permanentcontrolchar-enumeration/llms-full.txt) such as `ParagraphEnd`, `Tab`, `SectionBreak` or `ObjectAnchor`. - **Marker lines.** [setTextFrameMarkerLines](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/settextframemarkerlines-method/llms-full.txt) shows text frames without a border, [setDrawingMarkerLines](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setdrawingmarkerlines-method/llms-full.txt) drawings, and [setDocumentTargetMarkers](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setdocumenttargetmarkers-method/llms-full.txt) the targets of links in the document. - **Table grid lines.** [tableGridLines](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/tablegridlines-property/llms-full.txt) sets whether grid lines are shown for tables. ### Settings in the ASP.NET Core View Some display settings can be passed to the editor when the view is rendered, as properties of [TextControlSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/llms-full.txt): | Property | Sets | |---|---| | [ControlChars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/controlchars-property/llms-full.txt) | Whether control characters are visible | | [TableGridLines](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/tablegridlines-property/llms-full.txt), [TextFrameMarkerLines](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/textframemarkerlines-property/llms-full.txt), [DocumentTargetMarkers](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/documenttargetmarkers-property/llms-full.txt) | Grid lines and marker lines | | [BackColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/backcolor-property/llms-full.txt), [StatusBarColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/statusbarcolor-property/llms-full.txt) | The background color of the text area and rulers, and the color of the status bar | | [Dock](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/dock-property/llms-full.txt), [Width](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/width-property/llms-full.txt), [Height](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc/textcontrolsettings/height-property/llms-full.txt) | The size of the editor; see "Size the Editor" in the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/#size-the-editor) tutorial | There are no view settings for the view mode, the zoom factor or the visibility of the bars; set these from JavaScript. The following view turns on grid lines and marker lines. When the editor is loaded, it sets the rulers to centimeters, adds a zoom slider to the status bar and changes the color around the pages: ```cshtml @using TXTextControl.Web.MVC @Html.TXTextControl().TextControl(settings => { settings.TableGridLines = true; settings.TextFrameMarkerLines = true; }).Render() ``` [TXTextControl.displayColors](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/displaycolors-property/llms-full.txt) returns [TextViewGeneratorColors](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/textviewgeneratorcolors/llms-full.txt), which also sets the colors of the page shadows, the header and footer labels and the highlighting of form fields. The blog article [New Sample: Implementing a Dark Mode for the Document Editor](https://www.textcontrol.com/blog/2023/04/25/new-sample-implementing-a-dark-mode-for-the-document-editor/) combines these colors into a dark theme. If the editor doesn't adapt to a change of your page layout by itself, [refreshLayout](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/refreshlayout-method/llms-full.txt) forces it to recalculate its layout. ### Render Mode The Document Editor backend of TX Text Control .NET Server renders the pages as SVG; see [Architecture](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/architecture/llms-full.txt). [setRenderMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setrendermode-method/llms-full.txt) only works with the Windows-based backend of earlier versions. With the current cross-platform backend, it throws an error, because SVG is the only render mode. ### Print the Document [printDocument](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/printdocument-method/llms-full.txt) tries to print the document in the browser. Not all browsers support it, and it has no callback. [getCanPrint](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/getcanprint-method/llms-full.txt) passes whether the document may be printed, which depends on the edit mode and on the [allowPrinting](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/documentpermissions/allowprinting-property/llms-full.txt) permission of the document; see [Document Protection](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/protection/llms-full.txt). ```javascript function printFromEditor() { TXTextControl.getCanPrint(function (canPrint) { if (canPrint) { // Not all browsers support printing from the editor TXTextControl.printDocument(); } else { console.log("The document can't be printed."); } }); } ``` To give users a file they can print in any browser, save the document as PDF, as described in [Loading and Saving Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/load-save/llms-full.txt). [setFormattingPrinter](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/setformattingprinter-method/llms-full.txt) formats the document with the text dimensions of a printer. It is only relevant for the Windows-based synchronization service of earlier versions: the current cross-platform backend doesn't support printer-specific formatting. ### Next Steps - [Ribbon and UI](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/llms-full.txt): customize the ribbon, context menus and language. - [Editing Text](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/editing-text/llms-full.txt): the overwrite mode shown in the status bar. - [Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/printing/llms-full.txt) in Document Viewer: print documents that users only view. --- ## Nearby - **Previous:** [Spell Checking](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/spell-checking/llms-full.txt) - **Next:** [Ribbon and UI](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/llms-full.txt)