Archive

Posts Tagged ‘text’

Text-Overflow for Firefox via jQuery

April 8th, 2009 No comments

Devon Govett is a fan of the new CSS3 property text-overflow:

There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.

Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.

Lorem ipsum dolor sit amet, c…

I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. To use, just call ellipsis() on a jQuery object. For example:

$("span").ellipsis();

Categories: Webmasters Resources Tags: , ,

Rendering Text With Javascript, Canvas And VML

March 21st, 2009 No comments

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.

 

typeface

Categories: Others, Programming Tags: , , ,

Best Text Editor for Developers? 10 Prizes to Give Away.

March 21st, 2009 No comments

When building a website/web application or editing your source code, sometimes all you really need is a trusty text editor.

best_text_editor

We’d like to know what you think the best text editor is.

To make things interesting, the people over at SSLmatic, a SSL service offering RapidSSL, Geotrust and Verisign SSL certificates for up to 70% discounted prices, are offering 10 RapidSSL certificates, each worth $19.99 a year, to 10 participants.

How to participate

Simply state your vote for the best text editor in the following format:

vote: name of text editor

The details
  • Leave a valid email address in the comment form so that we can reach you.
  • You can only vote once.
  • Contest ends on March 23, 2009 after which commenting will be disabled.
  • Winners will be randomly selected via a MySQL database query similar to previous giveways.
  • Only one vote will be counted per person. If you mention more than one text editor, only the first text editor that you mention will be counted.
About SSLmatic

SSLmatic is a provider of cheap ssl certificates. They currently offer SSL certificates of 3 major SSL brands for discounted prices, and you can find out more about them in their Certificates / Prices page. Want to learn more about SSL and SSLmatic? Check out their FAQ page.

20 Excellent Free Rich-Text Editors

March 18th, 2009 No comments

 

rte Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

In this article, we present 20 exceptional (and free) rich-text editors.
1. TinyMCE

TinyMCE is an open source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.

aloxa
2. FCK Editor

FCKeditor is another wildly popular open source online rich-text editor (check out some of the websites that use it). It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data.

aloxa2
3. NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).

03_nicedit
4. BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open source application since 2002 – and with a devout following – you might be able to quickly find some help if you run into any issues in the BXE IRC channel.

04_bitflux
5. MarkItUp!

markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

 

05_markitup
6. WidgEditor

The widgEditor is an open source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML textareas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.

06_widgeditor

7. EditArea

EditArea is a free JavaScript source code editor. It’s an excellent solution for weblogs and websites that allow developers to contribute and format their own code.

8. Cross Browser Rich Text Editor (RTE)

Cross-Browser Rich Text Editor (”RTE” for short) is a free rich-text editor released under the Creative Commons Attribution 2.5 license. It’s a work based on the designMode functionality introduced in Internet Explorer 5 and implemented in the Mozilla Rich Text Editing API. It just has basic features, so it’s perfect for individuals looking to add simple rich-text editing support.

08_rte
9. YUI Library Rich Text Editor

The YUI Library Rich Text Editor is a UI control that’s part of the YUI Library. It’s a great solution for those already using YUI and individuals that want to save some server resources (since you can serve it directly from the Yahoo! servers). The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution.

09_yui_library_rich_text_editor
10. FreeTextBox

Web professionals using the .NET framework that want to add editing capabilities to their web pages and web applications should check out FreeTextBox: a robust, fully-featured, and extremely popular rich-text editor for ASP.NET. It has a built-in image gallery, a helpful JavaScript API for customization, and a full list of editing controls for constructing tables, ordered/unordered lists, and even spellchecking (using the IE spellchecking engine).

10_freetextbox
11. Damn Small Rich Text Editor

Damn Small Rich Text Editor (DSRTE) is a lightweight, free rich-text editor built on top of the jQuery library and a PHP backend. It’s plugin-enabled (meaning it’s highly-extensible), has image-uploading capabilities (using Ajax for responsive user interaction), and an HTML cleanup feature to tidy up messy markup.

11_damn_small_rich_text
12. Silverlight Rich Text Editor

Silverlight rich text editor is the first rich-text editor for Silverlight. It has many useful features such as “find and replace” to quickly find specific text or to batch-replace them with something else, keyboard shortcuts support, serialization of text input for security, and much more. Note that the original creator has stopped further development (so cross your fingers someone picks up his project).

12_silverlight_wysyg
13. Free Rich Text Editor

Free Rich Text Editor is a free, JavaScript-based HTML rich-text editing solution released under the Creative Commons Attribution 2.5 Generic license. The interface is reminiscent of Microsoft Word 2003’s interface, so users of this desktop application will find it quite familiar. It has everything you’d expect from a robust rich-text editor, as well as a code view to preview and edit the HTML source code directly.

13_freerichtexteditor
14. Dijit.Editor

The Dijit.Editor is Dijit’s (Dojo’s widget library) fully-featured rich-text editor. Built on top of The Dojo Toolkit (a popular JavaScript library/framework); it’s an excellent solution for those already using the Dojo Toolkit.

15. WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. It was developed to output compliant HTML 4.01 Strict Doctype HTML, so it’s the perfect solution for the standards-aware developer.

15_wymleditor

16. Whizzywig

Whizzywig is a free JavaScript web-based rich-text editor. Aside from features you’d expect

7 Free Tools to Identify A Font

from a rich-text editor, Whizzywig also has a Spanish and German version, a web-safe color picker to change your text’s colors, and custom-designed UI controls.

16_whizzywig
17. openWWYG YSI

openWYSIWYG is a free and feature-packed web-based content editor that’s perfect for a host of content management systems. It has a very intuitive “table creation” feature to help users construct HTML tables. It also has a wide range of browser support including IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.

17_openwysiwg
18. XStandard

XStandard is a highly-standards-compliant rich-text editor. It comes in two versions: XStandard Lite – which is completely free, and XStandard Pro. XStandard Lite has Microsoft Word text cleanup, spellchecking, and the ability to interact with third-party applications.

18_xstandard
19. Xinha

Xinha is an open source, community-built rich-text editor released under a BSD style license. It’s highly-configurable, extensible, and feature-packed. Xinha emphasizes on community development, and as such, you’ll find many helpful contributors in the Xinha forums.

19_xinha
20. Kupu

Kupu is an open source “document-centered” client-side rich-text editor released by the international association for Open Source Content Management (OSCOM). It features easy integration into a variety of content management systems including Silva and Plone, easy customization and extension, and Ajax saving for an uninterrupted user experience.

20_kupu

Categories: Tips and Tutorials Tags: , ,