WOLFRAM

Wolfram Language & System Documentation Center
Wolfram Language Home Page »

WebColumn
✖
WebColumn

[Experimental]

✖
WebColumn[{expr1,expr2,…}]

represents an HTML column containing the expri.

✖
WebColumn[expr,options]

displays with expr formatted using the specified option settings.

Details and Options

  • WebColumn is used to arrange and style expressions on a webpage.
  • WebColumn can be used with WebRow and WebItem to provide a webpage layout.
  • WebColumn[expr,spec1,spec2,…] allows the speci to be any list or sequence of the following:
  • opt1val1,…explicit options
    "class"a named class name from the current stylesheets
    color directive color (Red, RGBColor[…], …)
    size directive a size (width, {width,height}, …)
    InterfaceSwitched[…]switch formatting based on the environment
    Scaled[…]dimension relative to window size
    n (any number) dimension with pixel size n
    Italictext italic
    Boldtext bold
    Underlinedtext underlined
    Dashedborder drawn dashed
    Dottedborder drawn dotted
    Thickness[…],Thick,Thinborder thickness
    Mouseover[…]switch formatting based on mouseover
  • A few common explicit options include:
  • Background background color
    FontSize font size
    FontFamily font family
    FontSlant font slant (Plain, Italic, …)
    FontWeight font weight (Plain, Bold, …)
    Alignment alignment of the content
    Scrollbars scrollbar specification
    Frame whether to put a frame around the plot
    FrameStyle style specifications for the frame
    ImageMargins absolute margins to leave around the item
  • You can specify an option that is an arbitrary CSS property, like "box-shadow" "10px 5px 5px black".

Examples

open allclose all

Basic Examples  (1)Summary of the most common use cases

Deploy a single WebColumn to the cloud:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-c7kanz
Out[1]:=1

Use Scaled to specify a full-page layout:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-l39kge
Out[2]:=2

Scope  (2)Survey of the scope of standard use cases

By default, a WebColumn expands to fit the available viewport:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-kiz1f5
Out[1]:=1

When used inside a WebRow, it will expand to fit the remaining size:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-ysfmq9
Out[2]:=2

The second argument can be used to specify the size of the element:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-0u9st3
Out[1]:=1

A list can be used to specify width and height:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-z5p805
Out[2]:=2

Use Automatic to specify that the size should fit the content, or Full to specify that it should fit all the remaining space:

In[3]:=3
✖
https://wolfram.com/xid/0cg56k236-q1tg01
Out[3]:=3

Options  (10)Common values & functionality for each option

Alignment  (1)

Define a series of elements:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-f912w5

Use the Alignment option to specify how the contents should be aligned within the available area:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-mohqc7
Out[2]:=2
In[3]:=3
✖
https://wolfram.com/xid/0cg56k236-7f56h6
Out[3]:=3
In[4]:=4
✖
https://wolfram.com/xid/0cg56k236-jf7rol
Out[4]:=4

Background  (1)

The Background option can be used to specify a background color using any color specification, such as RGBColor:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-da9j62
Out[1]:=1

Any CSS specification can be used:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-f78hrq
Out[2]:=2

FontFamily  (1)

Use FontFamily to specify the font:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-x7zdo6
Out[1]:=1

FontSize  (1)

The FontSize option accepts a variety of specifications and allows for inheritance:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-k3u53k
Out[1]:=1

FontSlant  (1)

Use FontSlant to specify slanted characters in text:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-t1ehh1
Out[1]:=1

The Italic directive can be given instead of explicitly using the FontSlant option:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-pb4yyf
Out[2]:=2

FontWeight  (1)

Use FontWeight to specify how heavy the characters in a font should be:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-piw5mv
Out[1]:=1

The Bold directive can be given instead of explicitly using the FontWeight option:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-p5ktxd
Out[2]:=2

Frame  (1)

Draw a frame around the whole graphic:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-mfnj4
Out[1]:=1

FrameStyle  (1)

Specify the overall frame style:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-h15ohd
Out[1]:=1

ImageMargins  (1)

Have 20-point margins on all sides:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-uos9mx
Out[1]:=1

Scrollbars  (1)

Specify both horizontal and vertical scrollbars for WebColumn:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-wiwxri
Out[1]:=1

Use only a vertical scrollbar:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-838xha
Out[2]:=2

Properties & Relations  (3)Properties of the function, and connections to other functions

InterfaceSwitched can be used to switch the content of a WebColumn based on viewport size:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-3jv70p
Out[1]:=1

InterfaceSwitched can be used to switch the value of a property based on viewport size:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-68d8k9
Out[2]:=2

Specify a layout that expands to fit the viewport on a mobile device:

In[3]:=3
✖
https://wolfram.com/xid/0cg56k236-8kbkml
Out[3]:=3

Mouseover can be used to wrap any specification:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-88wvfo
Out[1]:=1

ExportString can be used to compile WebColumn to HTML:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-hevn4x
Out[1]=1

Possible Issues  (1)Common pitfalls and unexpected behavior

CloudDeploy uploads the HTML generated from the page expression at the time it is executed:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-6p10t4
Out[1]=1
In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-8ub30y

Use Delayed to cause the page to be generated anew on every webpage request:

In[3]:=3
✖
https://wolfram.com/xid/0cg56k236-wrx1zk
Out[3]=3
In[4]:=4
✖
https://wolfram.com/xid/0cg56k236-6asoho

Neat Examples  (2)Surprising or curious use cases

Write a centered layout:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-hk3n22
Out[1]:=1

Now test how it looks with some content:

In[2]:=2
✖
https://wolfram.com/xid/0cg56k236-quhu1c
Out[2]:=2

Write a layout in which the order of the elements depends on the width of the screen:

In[1]:=1
✖
https://wolfram.com/xid/0cg56k236-vd1al0
Out[1]:=1
Wolfram Research (2021), WebColumn, Wolfram Language function, https://reference.wolfram.com/language/ref/WebColumn.html.
✖
Wolfram Research (2021), WebColumn, Wolfram Language function, https://reference.wolfram.com/language/ref/WebColumn.html.

Text

Wolfram Research (2021), WebColumn, Wolfram Language function, https://reference.wolfram.com/language/ref/WebColumn.html.

✖
Wolfram Research (2021), WebColumn, Wolfram Language function, https://reference.wolfram.com/language/ref/WebColumn.html.

CMS

Wolfram Language. 2021. "WebColumn." Wolfram Language & System Documentation Center. Wolfram Research. https://reference.wolfram.com/language/ref/WebColumn.html.

✖
Wolfram Language. 2021. "WebColumn." Wolfram Language & System Documentation Center. Wolfram Research. https://reference.wolfram.com/language/ref/WebColumn.html.

APA

Wolfram Language. (2021). WebColumn. Wolfram Language & System Documentation Center. Retrieved from https://reference.wolfram.com/language/ref/WebColumn.html

✖
Wolfram Language. (2021). WebColumn. Wolfram Language & System Documentation Center. Retrieved from https://reference.wolfram.com/language/ref/WebColumn.html

BibTeX

@misc{reference.wolfram_2025_webcolumn, author="Wolfram Research", title="{WebColumn}", year="2021", howpublished="\url{https://reference.wolfram.com/language/ref/WebColumn.html}", note=[Accessed: 29-March-2025 ]}

✖
@misc{reference.wolfram_2025_webcolumn, author="Wolfram Research", title="{WebColumn}", year="2021", howpublished="\url{https://reference.wolfram.com/language/ref/WebColumn.html}", note=[Accessed: 29-March-2025 ]}

BibLaTeX

@online{reference.wolfram_2025_webcolumn, organization={Wolfram Research}, title={WebColumn}, year={2021}, url={https://reference.wolfram.com/language/ref/WebColumn.html}, note=[Accessed: 29-March-2025 ]}

✖
@online{reference.wolfram_2025_webcolumn, organization={Wolfram Research}, title={WebColumn}, year={2021}, url={https://reference.wolfram.com/language/ref/WebColumn.html}, note=[Accessed: 29-March-2025 ]}