Contents
Edit Raw HTML (iPhone / iTouch only)
Introduction
KyTekHTMLeditor for iPad, iPhone and iPod touch; lets you edit the textual content of
html documents as they appear in a browser - no codes to worry about. The
KyTekHTMLeditor supports display of mixed fonts and sizes, varying type styles,
colored text, colored backgrounds, underlining and numbered and bulleted lists.
Left aligned, right aligned, centered and justified text are supported along
with varying left and right margins.
Text can be copied and pasted from/to other applications and within the editor. Images can be placed/pasted and sized. Tables can be created and edited.
Spell checking and searching are supported.
CSS style definitions can be created and edited on iPad.
Support
The best way to reach us with comments or questions is via email:
Options
The Options button lets you specify a number of preferences related to use
of the KyTekHTMLeditor including:
- Select paper "width" which can either be the screen width (dependent on
screen
orientation) or a fixed width from 3 to 12 inches.
-
Default Text Size: Select default body text size. In the absence of a font-size specification for your body style the "Default text size" you specify in the Options is the size applied to text.
-
Base URL: If the document you are editing contains references to CSS files or image files that are not on your local iDevice or iCloud and they are relative rather than absolute then you can specify a base (or root) URL that the relative names are located with respect to. For example if your document contains a reference to a CSS file such as “css/filename” and the file is located at “http://www.host.com/css/filename” then you can specify a base URL “http://www.host.com/” and when you open your document the remote CSS file will be found.
- Return=>List Element: Specify that the return key should automatically generate new list elements
when your cursor is at the end of a list element (</li> is to the right of
the cursor as displayed in the right cursor button when editing).
- Save Login Credentials: Save the login credentials of your last login to an ftp site. If you select OFF then none of the information you type
is stored for future use. If ON is selected
then the last ftp address, user name and password are remembered and filled
in to the associated fields the next time you tap the FTP button.
- Advanced Search: Choose to use Advanced Search with regular expressions when using the search function if
running with iOS 3.2 or greater. If you select ON then you can type in the
search bar regular expressions as defined by the
ICU User Guide.
- Auto-save to existing file: Elect to have the auto-save function overwrite your existing file. If you
select OFF then if the file you are working on must be auto-saved as when you
tap the home button, switch apps or take a phone call then a new document is
created having the name
of your document with the date and time appended as a character string. If you
select ON then your existing file is overwritten when an auto-save is necessary.
-
Sort By Date: Specify that the listing of your documents should be ordered by date rather than the default sorting by name.
-
Include CSS: Specify that CSS documents stored on your iDevice or iCloud be included in the file listing
-
Include Images: Specify that image documents stored on your iDevice or iCloud be included in the file listing
-
Store Remote Images: Specify that image references to remote images (those not located on your iDevice or iCloud) should be downloaded to your device if they can be located at their specified URL and the network is available. Note that images copied to your device in this manner will overwrite existing files on your device that have the same name.
-
Read Remote CSS: Specify that CSS files located remotely should be read if the network is available and they can be located at their specified URL.
-
Store Remote CSS: Specify that when opening a document remote CSS files be downloaded to your device so they can be accessed offline and modified. Note that if your CSS files have the same name in different folders in their remote location then do not use this option as the CSS files will overwrite each other when downloaded to your device.
-
Edit Local CSS: Indicate that style definitions in locally stored CSS files can be modified by the KyTekHTMLeditor when running on iPad.
Open or Create A Document
KyTekHTMLeditor supports iCloud file storage if your version of iOS supports it. The iCloud documents are listed first under the heading iCloud Docs or iCloud Docs Offline if you don't currently have network access. If your iOS doesn't support iCloud then the heading is iCloud not available. The iCloud document names are italicized while the documents stored locally are in a roman typeface. Documents stored in iCloud can be edited from any of your iDevices with access to the iCloud account. Locally stored documents are private to the device they are stored on.
At the KyTekHTMLed Docs screen select any html document. If iCloud isn't supported by your iOS the document is displayed in
the KyTekHTMLeditor. If iCloud is available then a menu appears with four options: Edit, Copy to iCloud/local, Move to iCloud/local and Dismiss. Tap Edit to edit the document. Scroll and zoom the document with the usual iPhone
gestures.
If an iCloud document is selected and the document is currently available in the local device iCloud storage (indicated by an 'L' to the far right beside the document name in the listing) then the additional option Remove From Cloud Local Store is available. Tapping on this deletes the document from local storage requiring it to be downloaded from iCloud the next time it is opened.
Tap the + button at the KyTekHTMLeditor Docs screen to create a new document.
You're prompted for a document name and after tapping Create you'll see an empty
document with the keyboard visible.
If you want to create the document in iCloud where it is available to other devices then tap the iCloud Document button to On.
If you want to create a new document with the content of your web page then tap Initialize From URL and then specify the URL in the field below the button.
You can open and edit both html (or htm or shtml) files and asp files.
If the document you open contains link tags to CSS style definition files and the named file (minus any pathname) is in your local folder or your Options indicate that remote CSS files can be accessed and the remote files are accessible then the styles defined in the CSS documents are read as part of your document. If you edit any of the styles defined in the CSS document(s) then those new definitions are saved with your primary document. The CSS documents are not changed.
If your document contains image file references and those images appear in your local folder or iCloud they are recognized regardless of any prepended pathname in the html file.
If the images are not found locally or in iCloud and your options indicate that remotely located images can be downloaded and they are accessible then they will be downloaded. Image files downloaded from remote locations overwrite files of the same name on your local device.
Copy or Move Documents Between iCloud and Local
If you want to copy or move a document from local storage to iCloud storage or vice versa then select the document. A menu appears where you choose to copy or move the document to the other storage option. Note that this can be used to copy/move jpg, png, gif, css and other files that can't otherwise be edited. If you move a document then it is deleted from the storage location it is initially located in and then only resides in the new location. If you copy a document then it resides independently in both places. If you edit the local version after copying it to iCloud the iCloud version doesn't change to reflect your editing and vice versa.
Editing
Tap on the document to display a vertical cursor indicating a point
at which you want to edit the text.

Tap on the Edit button at the bottom
of the screen (NOT the "Edit html" button) to display the
keyboard allowing you to insert and delete text. Note that the toolbar at the bottom of the screen may have a tint behind it from your document as it is translucent. While the keyboard is visible
you can scroll around the document and change the insertion point by
tapping on your document. When you finish editing tap the Done button on the right side of the top toolbar (iPhone) or the key in the lower right of the keyboard (iPad) to hide
the keyboard.

The navigation bar is replaced by a toolbar while editing. The leftmost
four buttons are for adding heads and other block or paragraph tags, styling text or inserting other inline or character tags, changing font and changing color
as described below.
On iPad a tag editing button is also included, "< >", and there isn't a
Done button.
Cursor Motion
The next two buttons (just to left of the Done button on iPhone, the two rightmost
buttons on iPad) are
cursor motion buttons that also display the current object (character or tag) to
the left and right of the cursor location in the text. Tap on the left cursor
button and you'll see your cursor move to the left and the buttons updated to
contain new left/right objects. Similarly if you tap the right cursor button.
If you move left or right over a tag the cursor in text won't move but the
cursor buttons will update to show the new elements left and right.
This lets you precisely control the cursor placement to the left or right
of html tags when that is necessary.

On the iPhone only five characters are displayed in each button to
represent tags, more characters are displayed on the iPad. Short tags
are completely displayed, <u> and </u> for start/end underline.
Note that the editing buttons on the top toolbar change to their textual representation rather than an iconic representation when in landscape (horizontal).

Longer tags omit the '<' and '>' and if they aren't too long then they'll
also include the first character of a tag attribute. Close tags include the
leading '/' character while open tags do not have this.
Cursor Motion and Floating Text Elements
Note that when you move the cursor right past the open tag referencing a float text element or left over a corresponding close tag the cursor will into the float text object where it has been placed in the document. Similarly, if within a float text element and moving the cursor left past the start tag of the object or right past the corresponding end tag the cursor will move before/after the corresponding tags in the flow of text where the float text element is referenced.
Cursor Motion within Tables
You must tap within a table cell to place the cursor within a table. If
your cursor is before a "<table ...>" tag or after a "</table>" tag
and you use the cursor keys to move forward
or backward over that tag then the cursor steps over the table as though it is
a single character.
When tapping the left/right cursor buttons when the cursor is located
in a table cell the cursor will move between table cells when you tap the left
cursor button at the start of a table cell or the right cursor button at
the end of a table cell. If your cursor is located at the start of the first
table cell or the end of the last then the cursor will pop out of the table.
Cursor Motion when Image (img) or Thematic Break (hr) Selected
When an image (img) or thematic break (horizontal rule or hr) is selected (highlighted) then tapping the left or right cursor button places the cursor to the left or right of the img or hr tag in the text. This is particularly helpful when the selected object is floating and doesn't appear directly in the text where its referencing tag is located.
Setting or Applying Styles
The leftmost four buttons on the toolbar are for applying style tags
before inserting text or for applying a new style to selected text.
From left to right they are: paragraph (or block) styles, character
(or inline) styles, font/size and color.
Heads, Text Alignment, Lists and CSS Styles
If you want to add a head or list or any other block tag or define a paragraph with different
horizontal alignment (left, center, right or justified) or create an element
with a CSS style defined in your document then position your cursor
in the document at the point you want the new element and tap the Paragraph
(leftmost) button. Choose the type of element you want to insert from the left list. If you want to add an
ID and/or
Class attribute then select an ID from the center list and a Class from the right list. Tap
Select. Type the text. A new paragraph with the styling you have chosen is
created.
Note that if you select an item from the left list that contains an ID and also select an ID from the center list then the ID from the center list is ignored. Similarly if you select an item from the left list and/or center list that contain class(es) then those classes are all combined with any class that may be selected from the right list to form a compound class.
List Creation
If you chose a numbered list (ol) or bulleted list (ul) then your first
list element is automatically added. You can begin typing the first list element.
If your Options indicate to automatically create new list elements (the default)
then each time you type a return when your cursor is just prior to the close list tag (</li>)
a new list element is automatically generated for you.
Styles
If you want to add text with a
bold,
italic,
underline or similar inline
style tap the Style button (stylized B with underline). Choose the
style of element you want to insert from the left list. If you want to add an
ID and/or
Class attribute then select those from the middle and right lists. Tap Select. Type the text.
The same qualifications described above apply when selecting elements from multiple lists that contain multiple ID and/or class names.
Font and Size
If you want to add text with a different font and/or point size tap the
Font button (double A). Choose the desired font and size and tap Select. You can choose any size from 1 to 99 point. If you
only want to change the font leave the size selection at zero. If you only want
to change the size leave the font selection at "No Change". Type the text.
Colored Text and Colored Background
If you want to add text with a different color or different background
color tap the Color button (C). You can choose three different types of coloring
on the three wheels. The leftmost wheel sets the color of the text itself. The
middle wheel selects an inline style background color which only applies to the
immediate background of the text. The rightmost wheel sets paragraph background
color which spans the margins. You can set any or all of them. For any types that
you don't want to change leave "No Ch." selected.
Thematic Breaks - Horizontal Rules (hr)
Horizontal rules can be placed by tapping the Paragraph button and selecting
hr Thematic Break or another defined thematic break / horizontal rule definition. A horizontal rule that isn't floating is treated the same as a
<br> (return)
so it can be deleted with the delete key as can a
<br>. On iPad you can create and edit horizontal rule related styles, id's and classes. This lets you specify rule color, alignment, width (length), height (thickness), margins including top and bottom to control vertical spacing and whether the rule floats right or left or is anchored below the line it appears on.
Editing Horizontal Rules (iPad only)
Double tap a horizontal rule and select Edit from the copy/paste popup. A dialog appears allowing you to specify the attributes associated with the rule. Once you have set the class, id and other attributes as you want them tap the Save button and the modified rule appears in place of the rule that was there.
Display Update
If the display doesn't appear accurate you can zoom in or out by a small or large amount and the entire dispaly is redrawn which should correct any problems.

Creating and Editing Tables
Tap the Paragraph (leftmost) button and select
Table from the list of paragraph tags on the left wheel of the popover. Choose a Class and/or ID from the center and right wheels if desired.
Tap Select. A dialog appears where you indicate the number of columns, header rows, body rows and footer rows. If using an iPad you can also select Class and/or ID attributes for each of the table structure tags (section, row, cell) if desired. Tap Save. If you have specified non-zero values for the number of columns and rows then a table is created with placeholder numbers in each of the table cells. Double tap a placeholder to select it and type the replacement text.
Adding Table Rows
Tap within a table cell within the row you want to add rows after. If you want to add rows before then be sure your cursor is at the start of the first cell in the row. Tap the Paragraph (leftmost) button and select
Table row (tr) or a "tr" related paragraph tag on the left wheel of the popover
and select an ID on the middle wheel and/or a Class on the right wheel if desired. Tap Select. In the next dialog indicate the number of rows you want to add and tap Save. If you want to add only a single row then tap Save as the default row count is 1. If using an iPad then you can also select ID and/or Class attributes for the table cell tags that are created.
Adding Table Columns
Tap within a table cell within the column you want to add columns after. If you want to add columns before the first column of the table then be sure your cursor is at the start of the first cell in the first column. Tap the Paragraph (leftmost) button and select
Table column on the left wheel of the popover
and select a Class and/or ID on the center and right wheels if desired. Tap Select. In the next dialog indicate the number of columns you want to add and tap Save. If you want to add only a single column then tap Save as the default column count is 1. If using an iPad then you can also select ID and/or Class attributes for the table cell tags that are created.

Placing and Editing Images
Images are placed by tapping the Character attributes button and selecting
Image (img). A popover appears listing all the images in your folder. You can
place images into this folder via iTunes or ftp. Images are also downloaded into your
local folder when you open a document with references to remote images and your
options indicate to download remote images (recall that in this case downloaded images
will overwrite existing image files with the same name). When you choose an image from
the wheel the second and third wheels show the width and height dimensions of the
image if they are less than 1000. If either dimension exceeds this then the larger
dimension is specified as 100 and the smaller is proportional to this. Choose the dimensions you want the image to appear in your document in units of points (72 points = 1 inch). If you know the width or height that you want then specify that dimension and set the other to zero or leave the field blank and the other dimension is calculated to maintain the aspect ratio of the image.
You can copy an image from your Photos library and paste it into your document.
Use the Photos app to copy the image then tap at the point you want the image to
appear in your document and choose Paste from the copy/paste popup menu.
An image is treated the same as a character
so it can be deleted with the delete key.
Tapping the left side of an image places the cursor to the left of the image
while tapping the right half places the cursor to the right.
Editing Images (iPad only)
Double tap an image and select Edit from the copy/paste popup. A dialog appears
where you can change the image, specify the text that is displayed when a browser
can't display the image (Alternate Text), specify the id, class, width and height
(as points or percentage of containing object),
margins and whether the image floats or is anchored in the text (None).
Specify either the width or the height as zero (or leave the field blank)
and that dimension is calculated so as to maintain the aspect ratio of the image.
Specify both fields as zero (or blank) and the image dimensions are used directly.
Note that the width/height values, if specified in the dialog, appear in
the style attribute of the img tag, eg <img style="width:… height:…">
The intrinsic width/height, if non-zero,
are values for width/height specified in the img tag (not in a style definition) and
they supersede the values associated with the actual image as stored in the file
system, eg <img width=… height=…>.
The current image associated with the tag is displayed in the dialog if
available in the file listing.
Placing Background images (iPad only)
You can place background images in tables and table cells with a two step process (you can skip the first step if you've already defined the id or class):
-
First you must define an id or class style that includes a background image. When the keyboard is not visible tap Edit Styles in the upper right of the iPad. Tap '+' in the upper right of the style listing to create a new id or class. Type an ID name and/or Class name and tap Create. In the dialog that appears tap the Background Image button and select the image you want to use for the background from the popover. Select any other attributes you want to associate with the id or class and tap Save. Tap the back button to return to your document.
-
Tap in a table cell where you want to apply the background. Tap the Edit button at the lower right so the keyboard appears and then tap the edit tag button at the top (the "< >" button). Select a table cell tag (td or th) or table from the popover and tap Select. The dialog that appears lets you specify the attributes to associate with the table or table cell tag you've selected. Tap the ID and/or Class buttons at the top and choose the id and/or class names you associated with the definition in the first step. Tap Save after defining any other attributes and you are returned to the document and the table or table cell has the background you defined.
Selection
If you want to apply styling to existing text then you must first select
the text. This is done by tapping at a selection point. A single tap identifies
an insertion point for new text. A double tap selects the word around the point
that is tapped. Triple tap selects a sentence, quadruple tap selects a paragraph
and 5 taps selects the document.
The selected range is highlighted. The left/right cursor buttons (displayed
in Edit mode) now display the object to the left/right of the selection range.
You can extend the selection range to the left/right by tapping the appropriate
cursor button.
When a range of text is selected you can use any of the editing buttons
to apply new styling to that range of text.
You can tap the delete key to delete the selected range of text. Or you
can begin typing text that will replace the selected range.
Selection of a Table
Tap a location within a table cell. Then tap five times on the location of the blinking cursor. The innermost table containing that table cell is selected and highlighted. You can then cut or copy the selected table and paste it at another location or in another file. This approach precisely selects from the
<table ...> tag to the
</table> tag. Alternately,
if your cursor is not in the body of a table (in other words, not
in a cell of that table) then the table is treated as a character. If you select
a range of text before or after the table and use the cursor keys to extend
the selection range then you can extend the selection to include a table.
Selection within Table Cells
When selecting text within a table cell you can select at most the content
of a single cell, in other words between the "<td ...>" open tag and the
"</td>" close tag (or other implicit close tag).
First single tap at a location within the desired range of a cell so the cursor is displayed there. Next multi-tap at that point to select a word, sentence or paragraph.
Selection of an Image
Double tap an image to select it. The image is highlighted and you have the choice to cut, copy or paste it. If on an iPad you have the additional option to edit it. If you don't see the Edit option tap on the right arrow of the copy/paste menu. If you tap the Edit tab of the copy/paste popup a dialog appears allowing you to edit the image (img) tag. See the related section on editing images.
Selection of a Horizontal Rule
Double tap a horizontal rule to select it. The rule is highlighted and you have the choice to cut, copy or paste it. If on an iPad you have the additional option to edit it. If you don't see the Edit option tap on the right arrow of the copy/paste menu. If you tap the Edit tab of the copy/paste popup a dialog appears allowing you to edit the rule (hr) tag. See the related section on editing horizontal rules.
Selection of a Float Text Element
Tap once in a float text element so the flashing cursor appears there. Then tap five times to select the entire floating text element including the tag at the start that defines the float attribute and the associated end tag of the float text.
Copy and Paste
On iPhone and iPod touch copy/paste functions are only available when
the keyboard is NOT visible. On iPad the functions are only available when the
keyboard is visible and it is automatically made visible when a copy/paste
operation is possible.
On iPad there may be two paste options presented, Paste and PPaste. When
both are present on the menu then Paste will insert formatted text (i.e. with
tags previously copied) while PPaste inserts only the plain text without tags.
When copying on iPad you cause formatted text to be put on the pasteboard
by assuring the tags in your selected range of text are balanced.
On iPad there may be a Clr option. Tap this to clear the current contents
of the pasteboard.
Search
Tap the search icon to find text within your document. The Search
toolbar appears at the top of the screen. Type the text you want to search
for and tap Search. On the iPad you'll also see a popover containing recent
searches. Tap one in the popover to search for it. The selected text is
highlighted if found between the cursor and the end of the document. Search
for the next instance by tapping the search icon and then the search key.
If you have selected ON for the
Advanced Search (use regular expressions) option then you
may enter a regular expression into the search bar. See the
Options
section above.

Spell Checking
Tap to place your cursor at the point in your document where you want to
begin spell checking. Tap the spell button and the first mis-spelled word is
scrolled to and a popover dialog displayed with choices: LEARN, SKIP, DONE,
REPLACE and a list of zero or more possible replacements. If one
of the replacements is suitable tap it and the mis-spelled word is replaced
and the next mis-spelled word is scrolled into position. If the word is
correctly spelled and you want the spell checker to remember this as a valid
spelling tap LEARN. Tap SKIP to skip the word but not add it to the spelling
dictionary. Tap DONE to terminate spell checking. If you tap REPLACE then
spell checking is terminated and the keyboard displayed with the mis-spelled
word selected so you can type the replacement. If you want to continue spell
checking after typing the replacement hide the keyboard and tap Spell and
checking continues from that point
Save, Save As
Save the changes you make to your document by tapping the Save button. Or,
if you want to save the changes to a document with a different name tap Save As,
type the new name and tap Create. If you want to create the saved copy in iCloud then tap
iCloud Document to indicate
Yes. Should you accidentally leave the KyTekHTMLeditor
for any reason with unsaved changes the document is automatically saved
with the current name and the date and time appended to it in the form
20100115_0932 (i.e. 4 digits for the year, 2 for the month, 2 for the day with
the time following the '_');
Editing CSS Styles and Tag Attributes (iPad only)
Tap the "Edit Styles" button to edit your document styles.
A list of styles defined in the <style> ... </style> section of your document or in any of the CSS files referenced in your document appears. This list includes the standard tags (h1 - h6 for example) for which your document may not contain specific definitions. Tap a style name to edit that style.
The right side of each style name in the list displays four items:
-
Complete selector name (eg h1>abbr:first-child-of-type)
-
The selector priority preceded by 's'
-
The order in which the selector is encountered when opening your document preceded by 'o'
-
The name of the CSS file containing the style definition if not in the local document
If the rights side displays
not defined this is a standard tag for which a specific styling isn't specified.
If your document and related CSS files contain multiple definitions for the same selector then each will appear separately and the order and file name distinguishes them. If your preferences indicate that CSS files can be modified or the definition you choose is in your document then each multiply defined style is edited separately and saved in the same place as the original definition. If the definition is in a CSS file and you don't allow CSS file editing or the definition is in a CSS file that isn't stored locally or the definition defines multiple styles then all the style definitions with the same name and selector are merged and you are editing the merged definition which is saved at the end of the style definitions in your document.
The priority and order are only relevant if you have multiple definitions that may apply at a point in your document.
If you choose an inline style (eg 'i') then the dialog that appears allows you to set the font, font size, font color, text background color and text decoration (underline, line-through, overline). If you select a block style (eg 'h1') then the dialog additionally allows editing of text alignment, margins, line spacing, padding attributes and border attributes. Note that the block text background color spans the width of the margins as distinct from the inline background color which only spans behind the affected text.
You can type attribute values into any of the text fields. There are also buttons beside some of the fields which if tapped provide you with a list of choices for the field. The "Choose Font" button lets you select one of the fonts installed on your device and/or the point size. The various color selection buttons let you choose from the standard colors. You can also type standard color names or type a three or six digit hex color value (eg #ff0 or #ffaa44) or type an rgb value (eg "rgb(255,0,0)"). The color fields display a color swatch to their right corresponding to the color specified in the field.
If a field is blank it indicates either the default value for that field or what determines that default value. When editing a tag these default values correspond to the point in the text where the tag is located in combination with any values associated with id and class(es) indicated in the tag. If you change the id and/or class(es) then these default values reset to match the chosen combination.
The font size, margins and line height fields let you choose whether the value you specify is an absolute value in points or a relative value (percentage or em).
The border attributes (width, color and style) let you specify a common value for all four sides or a unique value for each side. Selecting "All" beside the "Top" field for each attribute sets the value for that attribute the same for all four sides. Selecting "Top" lets you indicate a unique value for each side for that attribute. Similarly, the padding can be set for all sides or individually.
If you change any of the attribute values the
Save button is highlighted. Tap it when finished editing the dialog values to save your changed style definition for use in the document. Note this doesn't actually save the modified document - you will need to do that on return to the document editor. If editing a text field tap the Done button on the keyboard to exit that field and enable the
Save button.
If you decide you don't want to retain any of the changes you have made tap the
Cancel button and the changes are forgotten and you return to the "Edit Document Styles" list.
When done editing all styles tap the back button in the upper left of the "Edit Document Styles" view to return to your document view where you'll see the effect of the styles you changed. If any styles were changed you'll note that the
Save button at the lower left of your document window is enabled.
Creating a New ID or CLASS Style
When the "Edit Document Styles" view is visible tap the '+' button in
the upper right to create a new style definition. You have the option to
create a definition associated with a particular tag or a generic style. If you
want to create a style associated with a particular tag then first tap
Base Style Name and select the tag. Otherwise leave this as
none. For a simple id, type the id name in the
ID Name field and tap Create. For a simple class, type the class name in the
Class Name field and tap create. For a compound class type all the names separated by spaces in the
Class Name field (eg "blue headline author"). For a combination id and class or compound class definition type the id into that field and the class(es) into the class field. Tap
Create to edit and save the definition as previously described.
You have the option to create definitions with complex selectors by specifying the selector components in the
Pre-Selector and
Post-Selector fields. The pre-selector is anything before the tagname#idname.classname. The post-selector is anything after the name. For example:
-
selector rule: h1>abbr#major.blue:nth-child(3)
-
pre-selector: h1>
-
post-selector: nth-child(3)
If the pre-selector doesn't end with a special character such as '>' or '+' then it is assumed to end with a space.
Once a new style definition is created it appears in the lists presented
when tapping on the paragraph and/or style buttons while editing text as
described above.
If you create a new generic
ID it will appear in the center list as:
IDname
If you create a new tag specific
ID it will appear in the left list as:
tagName#IDname
If you create a new generic
Class it will appear in the right list as:
className
If you create a new generic compound
Class it will appear in the right list as:
className1.className2
If you create a new tag specific
Class it will appear in the left list as:
tagName.className
If you create a new tag specific compound
Class it will appear in the left list as:
tagName.className1.className2
If you create a new combination
ID/Class it will appear in the center list as:
IDname.className1.className2
If you create a new tag specific combination
ID/Class it will appear in the left list as:
tagName#IDname.className1.className2
For styles that include a base tag this is the same as the name appears in the <style> ... </style> section of the underlying html document.
For ID and Class styles the leading '#' or '.' is dropped.
Note that class names are always presented in alphabetical order regardless of the order you enter them as class name ordering is irrelevant.
Editing Tag Attributes
You can directly edit the
attributes of a tag with the same graphical interface used to edit styles. Place your cursor in the text whose tag you want to edit by tapping within that text. Tap the "< >" or "Edit Tag" button (depending on screen orientation) when the keyboard is visible.
A popup menu appears listing the tags surrounding that point in the text. The top tag in the list is the innermost tag surrounding the cursor location while the last tag in the list is the outermost tag. The tags displayed in the list include any
id or
class attributes associated with the tag. Choose the tag you want to edit and tap
Select.
In addition to being able to set a variety of attributes associated with that tag you can also select or modify the class and/or id attribute of the tag. The
Class field can include a list of classes separated by spaces. The gray placeholder values in each field indicate the default value based on the context of the tag and the selected class/id attributes. If you change the class or id attributes the gray placeholder values are updated to reflect the change. Tap Save before tapping the back button to return to your document to see the effect of your changes. The changes you make are local to the text within the tag your cursor was located within as opposed to the global changes affected when you edit styles.
Editing Table Structure Tags
If your cursor is in a table cell when you tap the "< >" or "Edit Tag" button then a dialog appears allowing you to indicate whether you want to edit the attributes of the table cell tag itself or one of the structural tags related to the table component embodying that cell (row, section or table). The "cell" tag is chosen by default if you tap select. Choose a different table structure on the wheel to edit the associated tag of that type.
Creating Link Tags
Select a range of text around which you want to create a link or tap a point to create a link
at a point to which you will add the text visible to the reader. Tap the Style button (stylized B
with underline) and then select "Link (a)"
from the left column. The dialog allows you to specify the destination of the link and the target.
If both fields are specified the resulting tag is
"<a href="destination" target="target">. For example <href name="http://www.host.com/page.htm#name" target="_blank"> If on iPad you may also specify font and color
attributes if desired.
Editing Link Tags
Editing a link is the same as editing any other tag. Place your cursor such that the innermost tag
is the link tag of interest (by tapping at a point and/or using the left/right cursor keys). On iPad tap
the "< >" or "Edit Tag" button.
On iPhone/iPod tap within the text of the existing link tag to display the Copy/Paste menu which will include an Edit option. Tap Edit. In either case a dialog appears where you can edit the destination and/or target.
Creating Generic div (block) and Generic span (inline) Tags (iPad only)
You can create a generic div or span tag around a range of text or at a point by tapping either the Paragraph button (to create a generic div) or the Style button (to create a generic span). Then select from the left column of the popover either "Generic (div)" or "Generic (span)". A dialog is displayed allowing you to specify whatever attributes you want the tag to have. After setting the attributes of interest tap
Save (or if the keyboard is visible first tap
Done).
AirPrint
Printing is supported by tapping the print button (arrow coming out of a box) on the toolbar at the bottom of the display.
Web View (iPad only)
Tap the View button and your document is displayed with Apple's
built-in web browser. This will display all document elements including those
not supported by the KyTekHTMLeditor. Press the back button to return to the
editor view. Note that you must save your document before tapping the View
button to see any editing changes you have made to your document.
Document Sharing
The KyTekHTMLeditor supports five means to copy your documents onto or
off of your device including:
-
iCloud
- iTunes file Sharing
- Google docs
- FTP
- Email
Each of these methods is described below.
iCloud Sharing
iTunes File Sharing
When your device is running iOS5 or greater and it is connected to your
computer and you are running the latest iTunes on that computer then when you
select your device in the left panel of iTunes and choose the Apps panel and
scroll to the bottom of the window you see KyTekHTMLeditor in the
left scroll view. Select it and the KyTekHTMLeditor documents on your device
appear in the right scroll view. You can copy documents into and out
of this scroll view. Documents copied into the scroll view are copied onto your
device and will appear in the KyTekHTMLeditor on your device. Documents copied
out of the scroll view are copied onto your computer at the chosen location.
Google docs
Tap the Google docs button to sign in to your Google docs account (must be set
up separately). Under the Downloads screen you can select an html document and
tap Download to download the document to your iPhone, iPad or iPod. Download as many
documents as you like. Tap KyTekHTMLeditor Docs (the "back" button) to return to the listing
of the documents on your iPhone that you can then edit.
If you want to download to iCloud tap the
Local button at the bottom of the screen. The button title changes to
iCloud and further documents are downloaded to iCloud. Tap again to switch to local download.
While signed in to Google docs you can also upload html documents from your
iPhone, iPad or iPod to your Google docs account. Tap Switch to Uploads to see a listing of
documents on your iPhone. Select one and tap Upload to transfer that document
to your Google docs account. Upload as many documents as you like. Tap the
back button to return to your iPhone document listing.
FTP Upload/Download
Tap the FTP button to sign in to an ftp site. The FTP Sign In requests the
Address of the html document name you want to download or the folder you want
to obtain a listing of, the User Name and Password. If you want to download a
single document enter the complete address, pathname and file name (for example
ftp.host.com/index.html). If you want to obtain a folder listing append a '/'
to the end (for example ftp.host.com/ or www.host.com/). For anonymous ftp
leave the User Name and Password fields blank. Tap
Sign In.
FTP Download
If you entered a document name (no trailing '/') then it is downloaded
and you are returned to the KyTekHTMLeditor documents view. If you requested
a folder listing then the listing is displayed. When there is no selection the button in the upper right displays
Refresh. Select an html, htm, shtml, asp or css document and
the button displays
Download. Tap it and that document is downloaded to your device. Select a folder
name and the button displays
Open. Tap it and a listing of that folder is displayed. Tap the back
button to return to the previous listing. Tap the
Refresh button when nothing
is selected and the current listing is downloaded again.
If you want to download to iCloud tap the
Local button at the bottom of the screen. The button title changes to
iCloud and further documents are downloaded to iCloud. Tap again to switch to local download.
FTP Folder Download
Tap
Download Folder at the bottom of the screen to download all recognized file types in the folder.
If you want to download to iCloud tap the
Local button at the bottom of the screen. The button title changes to
iCloud and further documents are downloaded to iCloud. Tap again to switch to local download.
FTP Upload
When an FTP download listing is displayed you can tap the
Switch to
Uploads button to upload files to the FTP folder you are currently viewing.
After tapping
Switch to Uploads a listing of html documents on your device is
displayed. Select one and tap
Upload and that document is uploaded to the ftp
site. You can switch back to downloads by tapping
Switch to Downloads.
Quit FTP
You quit ftp access by tapping the back button until you return
to the home screen (KyTekHTMLed Docs).
Email Document
Tap the mail icon to send your document via email. You'll see the standard
mail screen with your document attached. Fill in the To field and any other fields
and tap Send.
iPad Pro or
Bluetooth Keyboard
and Keyboard Shortcuts
When you
are using the iPad Pro keyboard or an external keyboard tap the "KB" button at the bottom of the "KyTekHTMLed Docs" view. KyTekHTMLEditor then knows that an external keyboard is in use. When you disable the external keyboard (by disconnecting the iPad Pro keyboard or turning off Bluetooth or moving out of range of a Bluetooth keyboard) tap the "KB" button again.

When an external keyboard is in use all of the command buttons are located on the bottom toolbar as seen here. When working on an iPhone or iPod you must hold the device horizontally (landscape) to see the four editing and two cursor motion buttons as they won't fit on the screen when held vertically. Note that this toolbar is translucent so may take on a tint from your document as it does in the above image.
The editor supports keyboard shortcuts when using a physical keyboard. Hold the command key down to see the shortcut keys available in the context in which you are currently working. Cut, copy and paste (command-x, command-c, command-v) are generally available though they don't appear on the shortcut dialog displayed when holding the command key down.
Edit Raw HTML (iPhone / iTouch only)
You can edit the html codes directly by tapping "Edit html". If you first
tap a location in the document then you will be taken to that point in the
html codes. YOU MUST BE KNOWLEDGEABLE OF HTML CODING TO EDIT YOUR DOCUMENT IN
THIS WAY. Tap the back button to return to the KyTekHTMLeditor.
Copyright 2011 - 2016, KyTek, Inc. All Rights Reserved.