Skip to main content

Window representation in HTML

Sciter window is a host of HTML document loaded in it.

This HTML defines content of the window in full. Root <html> element of a window has special meaning - its window-XXX attributes define look and feel of the window.

Window Root Attributes

Window specific attributes - defined on root <html> element loaded into the window.

AttributeDescription
window-framestring, defines window type: "default","standard","solid","solid-with-shadow", "extended", "transparent"
window-iconWindow icon URL
window-titleWindow title
window-widthinitial width of the window, CSS length units
window-heightinitial height of the window, CSS length units
window-min-widthminimal width of the window, CSS length units
window-min-heightminimal height of the window, CSS length units
window-max-widthmaximal width of the window, CSS length units
window-max-heightmaximal height of the window, CSS length units
window-resizabletrue,false,<length> i.e. 10px counted from window frame inwards
window-minimizabletrue or false
window-maximizabletrue or false
window-alignment1..9 - align the window relative to desktop, -1..-9 - align the window relative to parent window;
window-blurbehindblur behind effect configuration, see window.blurBehind.
window-cornersstring: default, not-round, round, round-small - define window corner roudness on supported OS (e.g. Win11) .
window-stateshown, minimized, maximized, full-screen, hidden - initial state of HTML window
langISO 639-1 value, define dictionary for spellcheck, Date...
disable-debugdo not connect to inspector

These attributes may appear on other elements inside root <html> to give those elements window chrome roles:

AttributeDescription
role="window-caption"Allow to drag the window through this element
role="window-minimize"Instructs the element to behave as window minimize button
role="window-maximize"Instructs the element to behave as window maximize button
role="window-close"Instructs the element to behave as window close button
role="window-icon"Instructs the element to behave as window icon - on Windows it shows window menu on click on it.

Example, <caption element here:

  <header>
<button role="window-icon" />
<caption role="window-caption">My Window</caption>
<button role="window-minimize" />
<button role="window-maximize" />
</header>

behaves as a window caption allowing the user to drag-and-move the window.