To add document content click on any
position on the sheet to show the
CREATE popup menu. Select "Text
column"
A column container is created 2 inches
wide. Type some text on the keyboard.
Use the GRIP CONTROL to move the
text column to a new position.
Use the RE-SIZE CONTROL to change
the column width.
Right click on the text column container
to engage the property editor.
The property editor uses
HTML5 size units.
in = inches
cm = centimeter
px = 1/96 inch pixel
Each object in the document
has a unique name
uberED - Getting started - IMAGE
To add a picture click on any position on the sheet
to show the CREATE popup menu. Select
"Image". Choose an image from the open picture
dialogue.
By default, an image is drawn at 100% scale. This
is one picture element per 1/96th of an inch. This
is the standard for HTML5/CSS3. It does not
depend on screen resoultion. You can change the
image scale using the RE-SIZE CONTROL.
Click the "..." ellipsis on
the "scale" value in the
property editor to
engage the slider
control. The keyboard
left arrow, right arrow,
PgUp and PgDn may
be used to micro adjust
the scale in 1% and
10% steps.
By default, a URL is stored as a link to an
external resource. If the image source is in
the same (or subordinate) folder to the HTML
source file a relative link is created. This
example uses an "absolute link".
Click the "..." ellipsis on the URL value in the
property editor for image encoding options.
Small images can be encoded inline.
uberED - Getting started - GRAPHICS
To use Scalable Vector Graphics
(SVG) some "reference points"
must be added to the page. The
small red arrows designate a fixed
location on a page.
A circle Vector Graphic uses a
single reference position as a center
point. A line requires two reference
points
This is an unfilled "shape" connecting a series of
6 unique points. The path is "closed" by returning
to the start point. The path is stroked using a 1px
red pen in straight lines.
The same series of 7 reference positions are
used to draw a polybezier shape stroked in a 3px
green pen and filled with yellow
The "Arrow" is not an
intrinsic SVG element.
UberED creates this
element using poly lines.
uberED - Getting started - GRAPHICS - Text caption
Text in column is composed left to right and aligned to a baseline. It cannot be rotated.
A "text caption", however may be used to display text associated with a reference point at
an angle at 0° to 360° to the natural display direction. The text anchor point may be
specified as start, middle or end aligned.
UberED getting started - FAQ
Q. My document has some blank pages how do I remove them?
A. Right click to engage the property editor and find "DOCUMENT" in the drop down box. You can
edit the number of pages here. You can set the TITLE and the PAGE SIZE defaults here too!
Q. I type a number of spaces and the editor ignores them - how do I do spacing?
A. UberED uses HTML conventions - multiple spaces are ignored. If you really need extra spacing
between words insert a NON BREAKING SPACE using the EDIT menu.
Q. Can I do special characters?
A. Yes - if the current font supports them. Remember that if you are publishing the HTML file on a
web site then you must choose a font that is likely to be supported for all users. UberED stores
the special characters in the HTML in UTF8 format. You can select a UNICODE keyboard from
the EDIT menu.
Q. Can I edit the HTML?
A. Yes - but the sub-set of HTML5 supported by UberED is very limited. Understand the XML tree
structure!
Q. I want to align a number of elements. Is there an easy way?
A. When you highlight "left" and "top" values in the property editor, a drop down box may be
selected that lets you choose values from other elements. The LEFT and RIGHT MARGINS can
also be used as alignment guides. The margins may be moved by dragging the small blue arrow
directly above the dotted blue line or editing the document properties.
Q. How do I edit an graphics element?
A. Right click on a reference point used to construct the graphic. The drop down list in the
property editor highlights the associated graphics using a point icon.
In this example, POINT34 is used by both the
circle 10 and the line 11 graphics.
