This is a post with no point other than to share some CSS styles I made for recreating the appearance of Max 8 objects in a web browser. I’ve been planning to post several short entries about Max ideas, and after using a square bracket notation to convey Max code in text [like this] (when posting on the Max forums for example), I tried recreating them in HTML and CSS to help make text-based description of Max code a little more intuitive.
These styles reproduce the vanilla styling of Max 8 objects, messages and comments. With the exception of bubble comments, all elements are displayed in their unlocked state like this:
sah~ jit.pwindow @size 1280 720 qmetro 20 @active 1replace drumloop.aif read bounce.mov startwindow-40 2.71 C-2Load sample then hit spacebar Ensure dac~ is running Use localhost/127.0.0.1 port 9000Click and drag in the multislider Switch between fullscreen and windowed Turn on metroUsage
Max objects can be created with any semantically appropriate inline/inline-block element, eg. <code> or <span> — the rules in the stylesheet will set display: inline-block; on the element used. As the elements are inline-blocks, they can be placed inline within text like this.
Give the element a class of "max object", "max message", "max number", "max comment", "max comment bubble", (or "max comment bubble multiline") to produce the desired object. (See Examples below).
I’ve also sketched up a jQuery script that adds an adjustable number of inlets and outlets based on the elements’ data-inlets and data-outlets attributes. By default, objects are given an inlet and an outlet, unless specified otherwise by adding data-inlets="5" and data-outlets="2" attributes. Messages, numbers, and comments are given their standard number of inlets and outlets without having to explicitly specify them. Inlets and outlets can be suppressed though by adding data-inlets="false" (or data-inlets="0") and data-outlets="false" (or data-outlets="0").
Examples
metro 125<code class="max object" data-inlets="2" data-outlets="1">metro 125</code>
vst~ 8 8 VCV-Bridge.vst
<code class="max object" data-inlets="8" data-outlets="14">vst~ 8 8 VCV-Bridge.vst</code>
jit.bfg
<code class="max object" data-inlets="1" data-outlets="2">jit.bfg</code>
cpuclock
<code class="max object">cpuclock</code>
p adstatus_settings
<code class="max object" data-inlets="0" data-outlets="0">p adstatus_settings</code>
read ducks.mov, bang
<code class="max message">read ducks.mov, bang</code>
replace drumLoop.aif
<code class="max message">replace drumLoop.aif</code>
"CC 4" $1
<code class="max message">"CC 4" $1</code>
74
<code class="max number">74</code>
A#5
<code class="max number selected">A#5</code>
0.98
<code class="max number">0.98</code>
0.0016328
<code class="max number selected">0.0016328</code>
A regular comment
<code class="max comment">A regular comment</code>
A 'bubble' comment
<code class="max comment bubble" data-arrow="left">A 'bubble' comment</code>
For completeness, comments can also be forced to be multiline with the addition of the ‘multiline’ class, like this:
A 'bubble' comment that
spans multiple lines.<code class="max comment bubble multiline" data-arrow="left">A 'bubble' comment that<br />spans multiple lines</code>(As bubble comments are displayed as ‘inline-block’ elements, multiline bubble comments must have line breaks in them with <br /> element as shown above, to force the text to wrap over multiple lines).
Bubble Comments
Changing the data-arrow attribute can also be used to change the side of the bubble comment’s arrow like this:
A left arrow 'bubble' comment<code class="max comment bubble" data-arrow="left">A left arrow 'bubble' comment</code>
A top arrow 'bubble' comment
<code class="max comment bubble" data-arrow="top">A top arrow 'bubble' comment</code>
A right arrow 'bubble' comment
<code class="max comment bubble" data-arrow="right">A right arrow 'bubble' comment</code>
A bottom arrow 'bubble' comment
<code class="max comment bubble" data-arrow="bottom">A bottom arrow 'bubble' comment</code>
A multiline left
arrow 'bubble' comment
<code class="max comment bubble multiline" data-arrow="left">A multiline<br />left arrow 'bubble' comment</code>
A multiline top
arrow 'bubble' comment
<code class="max comment bubble multiline" data-arrow="top">A multiline<br />top arrow 'bubble' comment</code>
A multiline right
arrow 'bubble' comment
<code class="max comment bubble multiline" data-arrow="right">A multiline<br />right arrow 'bubble' comment</code>
A multiline bottom
arrow 'bubble' comment
<code class="max comment bubble multiline" data-arrow="botton">A multiline<br />bottom arrow 'bubble' comment</code>
Unlocked Patcher
Lastly, if you want to add a patcher canvas to your page, use a block element (eg. <section>) with a "max patcher" class like this: <section class="max patcher"></section> — and nest your elements inside it, eg.
jit.hello<section class="max patcher">
<code class="max object">jit.hello</code>
</section>
Patchers can also have a data-zoom attribute if you want to increase/decrease zoom levels. Acceptable values are 25%, 50%, 75%, 100%, 125%, 150%, 200%, 300%, 400%. Treat this as a bonus feature that may not work in some browsers (Firefox, Opera).
jit.bfg<section class="max patcher" data-zoom="200%">
<code class="max object">jit.bfg</code>
</section>
Download
Download the CSS and JS files:
- maxobjects.css [v190913]
- maxobjects.js [v190913] (requires jQuery to be included first)
and add the following to the <head>:
<link href="path/to/maxobjects.css" rel="stylesheet">
<script src="path/to/jquery.js"></script>
<script src="path/to/maxobjects.js"></script>