Writing a Text Editor. Part 8 (last): Simple scroll

The only thing left that keeps editor from doing all the things it should is lack of ability to scroll contents when they don’t fit into the view. Let’s implement a simple console-style scroll that just always keeps cursor incised visible area.

Read the rest of this entry »

Posted in Web Tagged: , No Comments »

Writing a Text Editor. Part 7: Text selection

Now that we can use cursor and insert text it’s time to tackle the most complex aspect of text editing – selection. Handling the selection can be split into two major parts that need to work together:

  • calculations and adjustment of selection range within document;
  • rendering selection highlight and handling user input.

I will show you how to implement code that handles both of this aspects.

Read the rest of this entry »

Posted in Web Tagged: , No Comments »

Writing a Text Editor. Part 6: Text insert and delete operations.

This part six of this series of tutorials on creating a text editor but sadly we haven’t done any text editing yet. Let’s change that by implementing inserting and deleting functionality in our text editor.

Read the rest of this entry »

Posted in Web Tagged: , No Comments »

Cross-browser CSS3 Image-Free Custom Checkbox

A while ago I wrote an article on creating custom checkbox in webkit which comes very handy when you a mobile but on desktop you need more compatibility. In this post I’m going to show you how to create an image-free cross-browser pure-css (except for IE < 9) custom checkbox element.

Read the rest of this entry »

Posted in Web Tagged: , No Comments »

Writing a Text Editor. Part 5: Zero-width selection (cursor) support

It’s finally time to add some interactivity to our text editor. First thing that we need in order to allow user to edit a document is a cursor, which is also called a zero-width selection because well, that’s what it is, really. Let’s go.

Read the rest of this entry »

Posted in Web Tagged: , No Comments »

Writing a Text Editor. Part 4: Read-only document and naive rendering

Now that we have font metrics we can actually render something meaningful text. But before that we need to store that text somewhere, so it’s finally time to actually start implementing the line-based data structure I described in Part 0.

Read the rest of this entry »

Posted in Web Tagged: , No Comments »