Show Superscript char in tooltip of a html control? - html

I want to know, it's possible to show superscript character in the tool tip of html control
for ex.
$(tblth).attr("title","name <sup>a</sup>");

As it's not HTML (it's natively rendered and depends on the OS), no you can't do that.
The usual solution is to do your own tooltip (or use one of the numerous libraries). The good news is that's easy.

Related

Emoticons - CSS backgrounds or inline images?

I was thinking to replace user text like :), :P in comments with smilies (emoticons). Using regex. Do you think it's a good idea for the replacement to be a span element with a class? Then I apply the smiley image to that class?
Or should I just replace that text with <img> tags?
CSS is usually seen as not part of the content, but these image smileys are...
(if you disable the css, the text could change its meaning because emoticons are missing)
An emoticon is visual information presented using characters, so if you replace, say, “:-)” by something, the natural candidates are special characters such as “☺” (U+263A WHITE SMILING FACE) and an img tag like <img alt=":-)" src="smiley.png">.
Using an element with a background image has several drawbacks, including lack of any counterpart to the alt attribute and the common browser behavior of suppressing background images on printing.
It is somewhat risky to programmatically change anything emoticon-looking to e.g. an image. You cannot be sure that every “:-)” is an emoticon. All kinds of odd character combinations may arise in special fields. Besides, if the user was writing e.g. about emoticons, part of the content might get lost or distorted in the replacement.
if you have a lot of smileys you are better of using the css sprite trick because it means the browser only has to download one image file instead of downloading a dozen smaller ones
this will result in less overhead and better caching
Use CSS to display the pictures. The best practice is to strip unwanted characters, invisible characters and HTML tags from user input, to avoid HTML code injection and cross-site scripting.
Have the smileys in plain-text, and display a picture instead with CSS.
You can achieve that by using a <span> or another element.
For instance, :) should be <span class="normalsmiley">:)</span> in the code.
Then the text will make sense for people not seeing images or with CSS disabled (they will see a text smiley).

Bidirectionality in html

Using Sphinx, I'm editing pylearn documentation content at https://bitbucket.org/omidraha/pylearn/.
All paragraphs are Right-to-Left (because of Persian language) and code samples between text, rendered incorrectly.
Generally I'm looking for a way to apply bi-directionality algorithms of unicode or microsoft on a web page.
Is there a way to set css style of codes, to be LTR inside of a RTL paragraph? if not, how could I modify sphinx source to do seperate code samples, for example in a frame or something like that?
If you want to specify the direction in which the test is displayed, use the "dir" attribute.
See: http://reference.sitepoint.com/html/core-attributes/dir

What HTML is permitted within Flash text fields

Could someone clarify for me what input Flash accepts for its text fields?
I am tasked with managing a content management system, this then generates XML which power's flash sites. I have nothing to do with Flash. I work with PHP. Currently we use a rather temperamental Flash Text Editor which is prone to all sorts of troubles.
I tried to plug-in tinyMce but it broke the Flash templates. I then recently spoke to someone who said that flash should take any HTML. Now I am confused as this would point to a dodgy template.
Can someone clarify. Do Flash text fields handle all HTML or just a limited subset of HTML. If it is the latter, what happens if it comes across a tag it doesn't recognise? Does it display the tag or break?
Thanks,
Jason
see this page for a list, but be warned, some things (br, p in particular) might not function exactly the way you think. for example i had an issue where an img with a br after it did not move the next line of text down correctly, it floated it on the right of the text instead.
edit: also be aware that if you allow bold and italics tags and you're using an embedded font, then you'll need to embed the bold and italic forms too.

WYSIWYG browser editor that generates *good* HTML?

I'm searching for a "suck less" WYSIWYG in-browser X?HTML editor that generates good HTML code.
(no <font>, <foo style="...">, <p></p><span></span><p><span> </span><span><span>blah</span></<span></p> and so on -- <b> and <i> etc is ok).
Should be easy-to-use as it is going to be used by people that do not know what HTML is.
Any suggestions?
Extra points for Copy-and-Paste-from-Word-readiness! :-)
(I found a lot of editors but they all create that <font> and nested <span> crap that breaks site design and bloats a site with one table up to 100kB.)
Download the current version of CKEditor and look at the XHTML output sample. It shows how to use full WYSIWYG but it doesn't generates font or styles. You just need to adjust the configuration to your needs.
What about WYMEditor?
WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.
With WYMeditor, the code can't be contaminated by visual informations like font styles and weights, borders, colors, ... The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.
I've used it a little and while it takes quite a bit of tweaking if you have very specific needs, it does work out of the box for simple XHTML editing. If you set up specially annotated CSS files then it will detect the styles you want users to use and block level elements to which they apply. You can also tell it how to display these styles in the editor (which might be different from how you want them displayed in the resulting XHTML).
Of course, it generates XHTML, not HTML, so it may not meet your exact needs.
Wikipedia has a category for them:
http://en.wikipedia.org/wiki/Category:JavaScript-based_HTML_editors
You can use Markdown with the WMD UI, it's the one used by Stack Overflow. It always produces valid HTML code.
I just recently searched for an editor to create solid documentation, whose output is suitable for Subversion diffs: https://superuser.com/questions/126621/wysiwyg-editor-for-structured-text-suitable-for-svn-versioning
The editor that was suggested - "KompoZer" - turned out to be fantastic, especially because it generates very clean HTML (in my opinion). And I say that, although I had originally preferred something leaner than HTML.
P.S. Reading your question again, I'm not sure, what you mean with a "browser editor" - are you looking for an editor that can be integrated in an HTML page? KompoZer is based on a browser, but it can probably not be integrated in an HTML page.
I recently switched one of my projects to markdown to avoid this exact issue. There's still a bit of a learning curve for the users but I haven't had to deal with the usual issues that occur when they copy/paste content from Word and wonder why it blew up.
Having said that, I prefer CKEditor over TinyMCE and the Telerik controls. I've generally found it generates somewhat cleaner HTML.
There are several WYSIWG editors for embedding within your website out there.
WYMeditor (http://www.wymeditor.org/) looks very nice and seems to be a good fit for targetting clean and valid XHTML results.
Spaw2. Although it's kinda abandoned now.
The Apple Cocoa NSTextView class exports quite nice html, where all the fiddling is done through specifying a style sheet in the header. The Apple TextEdit editor uses this.
http://tinymce.moxiecode.com/ - easy to use, can import form Word, and restrict formatting to predefined CSS styles, to provide consistent output.
This post is 8+ years old now but still relevant...
I found an awesome github page with a curated list of WYSIWYG editors, including a few WYSIWYM ones which guarantee sane html. As of 2018, the most current and best WYSIWYM one looks like ProseMirror, or maybe ORY Editor if you're looking for something to edit entire webpages(!) in one textfield.

A WYSIWYG Markdown control for Windows Forms?

[We have a Windows Forms database front-end application that, among other things, can be used as a CMS; clients create the structure, fill it, and then use a ASP.NET WebForms-based site to present the results to publicly on the Web. For added flexibility, they are sometimes forced to input actual HTML markup right into a text field, which then ends up as a varchar in the database. This works, but it's far from user-friendly.]
As such… some clients want a WYSIWYG editor for HTML. I'd like to convince them that they'd benefit from using simpler language (namely, Markdown). Ideally, what I'd like to have is a WYSIWYG editor for that. They don't need tables, or anything sophisticated like that.
A cursory search reveals a .NET Markdown to HTML converter, and then we have a Windows Forms-based text editor that outputs HTML, but apparently nothing that brings the two together. As a result, we'd still have our varchars with markup in there, but at least it would be both quite human-readable and still easily parseable.
Would this — a WYSIWYG editor that outputs Markdown, which is then later on parsed into HTML in ASP.NET — be feasible? Any alternative suggestions?
I think the best approach for this is to combine
Converting Markdown to HTML &
Displaying HTML in WinForms
The most up to date Markdown Library seems to be markdig which you can install via nuget
A simple implementation might be to:
Add a SplitContainer to a Form control, set Dock = Fill
Add a TextBox, set Dock = Fill and set to Multiline = True
Add a WebBrowser, set Dock = Fill
Then handle the TextChanged event, parse the text into html and set to DocumentText like this:
private void textBox1_TextChanged(object sender, EventArgs e)
{
var md = textBox1.Text;
var html = Markdig.Markdown.ToHtml(md);
webBrowser1.DocumentText = html;
}
Here's a recorded demo:
#Soeren,
You can most definitely embed IE with the Javascript Markdown editor inside a Windows Forms application.
the RichTextBox control
So you want to use Markdown but you want the user not to know it? This might not be an achievable goal. I think the point of Markdown is that it is geared toward writers that are willing to learn a little bit of fairly natural syntax and edit everything in plain text (like Wikipedia? are there pure WYSIWYG editors for that? probably... and probably some other Wikipedia editor person has to come and clean up the resulting markup and formatting...). If you want it to be transparent to the user (like MS Word) Markdown may not be what you want or give you the advantages it advertises in that situation.
The input happens in Windows Forms
Oops! Now I understand better your question. I guess it depends on how your Windows Forms app looks whether the embedded IE control sticks out like a sore thumb. If you try it you might find that you can get it to work.[1]
In your position, I would try something like this [2]:
http://wmd-editor.com/examples/splitscreen
If you don't think that sort of arrangement will go over well with your users, (especially all the editing in the text-only window) then once again I don't think Markdown is the answer for your specific application. If you think your users are keen on the idea of editing pure text, then I bet we can find a solution. Please clarify?
Jared.
[1] I had success dropping an IE HTML control into a project strictly to display some generated results as a PDF (using an IE Reader plugin like Adobe Reader or Foxit). The user has no idea that that part of the GUI is an IE control, it just shows the PDF, allows printing and saving, etc.
[2] ...but remove the borders and make the two split controls touch all four edges of the embedded IE control, or get very close... keep it light grey or white, for example, and eliminate any borders of the IE control so it blends into the surrounding controls. Maybe put this on its own tab page and I challenge a non-technical user to tell/care if it's an HTML control or native.
I could totally be wrong about all this (one would have to see this in action to determine if it would work) but it might be easier than writing your own interactive Markdown editor...
...actually to implement your own C# Markdown editor, you could just put a text edit box next to an embedded IE control and run the current Markdown through the .NET Markdown->HTML converter on a separate thread, and replace the HTML in the IE control (assuming the Markdown->HTML converter is very liberal and robust against throwing ANY exceptions).
Can't you just use the same control I'm Stack Overflow uses (that we're all typing into)---WMD, and just store the Markdown in the VARCHAR. Then use the .NET Markdown to HTML converter, as you mentioned, to display the HTML as needed. Jeff talks about this in more detail in a StackOverflow podcast (don't know the episode number).
"WYSIWYG Markdown" is really an oxymoron since the whole point of Markdown is to allow you to write markup syntax naturally and intuitively which is then post-processed into html, unless you mean actually taking for example **text** and rendering it as **text** for example. That would actually be kind of cool, but it would get very difficult for things like numbered and bulleted lists, since you would have to do all the positioning, yet keep everything based on actual textual characters (e.g. '*' instead of the bullet symbol) and support proper textual input positioning, backspace, etc.
For example,
in this bullet list,
the bullets would actually have to be asterisks,
and the spacing would not really be there.
That would certainly be worth paying attention to, if someone did tackle it.