{"id":25719,"date":"2016-10-16T03:01:54","date_gmt":"2016-10-15T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25719"},"modified":"2016-10-16T19:47:28","modified_gmt":"2016-10-16T09:47:28","slug":"html-style-mapping-tool-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-style-mapping-tool-primer-tutorial\/","title":{"rendered":"HTML Style Mapping Tool Primer Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Style Mapping Tool Primer Tutorial<\/p><\/div>\n

We’re having a first go at a new web application tool idea today, an external Javascript tool that when applied to a webpage, or not<\/font><\/a>, between <head> and <\/head> via …<\/p>\n


\n<

… allows you to dynamically map some aspects of an HTML element’s style onto others.<\/p>\n

So far, with our prototype “tool” we only allow elements to have styling mapped from, be those with a non-blank innerHTML<\/i> property, but we’ll see over time if this opens up … am not sure.<\/p>\n

Maybe you remember the Javascript function “copyTextareaStyling” featuring in the HTML Textarea and Div Talents Primer Tutorial<\/a> as shown below? Well, that formed the heart and soul of the new “tool” today that has this external Javascript programming source you could call meld_style.js<\/a> and which you can try out because we have here<\/a> a Random Emoji Slideshow to enable you to try this “tool”.<\/p>\n

\n

Previous relevant HTML Textarea and Div Talents Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML<\/a>

HTML Textarea and Div Talents Primer Tutorial<\/p><\/div>\n

We faced a dilemma today with the name of our web application, and ended up with textarea_talent.html<\/a> (along with its business logic external Javascript textarea_talent.js<\/a>), but as the project went along we were torn towards a name of div_talent.html<\/i> and div_talent.js<\/i> as we shall explain below.<\/p>\n

We understand the great role the HTML textarea<\/a> element has in CMS<\/a> (Content Management Systems) work, and we illustrate this below with (a) WordPress (blog as an example) …<\/p>\n

<\/img><\/p>\n

It’s crucial for getting HTML or non-caretted Text (that is internally turned into HTML behind the scenes) … via those wonderful<\/a> tabs<\/a> … off the user and onto the MySql database, and then out to the client user as part of a webpage. Out at that webpage, though, we’ve no doubt this content is embedded in an HTML div<\/a> element, the other “talent” here.<\/p>\n

But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things …<\/p>\n\n\n\n\n\n\n\n\n\n\n<\/table>\n

Our web application today is like an inhouse version of (a web browser) View Page Source type of arrangement, but allowing, optionally, for the highlighting of words. The “highlighting of words” functionality needed the HTML div element to come into the equation, otherwise the “talents” of an HTML textarea element would have sufficed, and are normally preferred, for those editing reasons. By the way, an HTML textarea element given a readonly<\/i><\/a> property stops the user changing an HTML textarea element’s contents, should that be what you require.<\/p>\n

Another issue came into play as a “subtheme” of today’s tutorial. Are you aware that some HTML elements, such as …<\/p>\n

\nTextarea elements do not, by default, inherit CSS styling settings of the webpage Body element\n<\/p><\/blockquote>\n

… which means, without Javascript DOM programmatic intervention the text shown in an HTML textarea element will differ greatly in its appearance to that of an HTML div element. This annoyed us enough to warrant some research and development on this topic and found that the idea to have both HTML div and textarea elements to be mapped to the inherited look of the HTML body element, that you might attempt to do via CSS like …<\/p>\n


\n<style>
\ntextarea, div {
\n font-family: inherit;
\n font-size: inherit;
\n}
\n<\/style>
\n<\/code><\/p>\n

… was not nearly so effective a thing to do, as to put in the hard yards to “purloin” the styling characteristics of one HTML element type and “slap” those characteristics, via Javascript DOM, onto the other HTML element type of interest, via code (snippet) like used today (with its “thank you” implied link), as per …<\/p>\n


\nfunction copyTextareaStyling() {
\n var output = document.getElementById(\"tarea\"), divelem = document.getElementById(\"tareadiv\");
\n if (divelem) { \/\/ thanks to ideas off http:\/\/stackoverflow.com\/questions\/12266320\/copy-div-content-to-textarea-or-text-with-the-same-font-family-style<\/a>
\n divelem.style.fontFamily = window.getComputedStyle(output,null).fontFamily || output.style.fontFamily || output.currentStyle.getCurrentProperty('font-family');
\n divelem.style.fontSize = window.getComputedStyle(output,null).fontSize || output.style.fontSize || output.currentStyle.getCurrentProperty('font-size');
\n divelem.style.border = window.getComputedStyle(output,null).border || output.style.border || output.currentStyle.getCurrentProperty('border');
\n divelem.style.padding = window.getComputedStyle(output,null).padding || output.style.padding || output.currentStyle.getCurrentProperty('padding');
\n divelem.style.margin = window.getComputedStyle(output,null).margin || output.style.margin || output.currentStyle.getCurrentProperty('margin');
\n divelem.style.overflow = window.getComputedStyle(output,null).overflow || output.style.overflow || output.currentStyle.getCurrentProperty('overflow');
\n }
\n}
\n<\/code><\/p>\n

… via the wonders of the Javascript window.getComputedStyle()<\/a> method that we have mentioned before a few times at this blog<\/a>.<\/p>\n

Maybe you are a regular at this blog, and recognize the look of today’s live run<\/a> web application? Yes, a lot of the ideas emanating from Legend for and from HTML Map Element Web Server Tutorial<\/a> thread of blog postings went into the “purloinment”<\/a> … nga, nga .. nga nga … ngaaa … it is a word<\/font> … exercise done on legend_via_map.htm<\/a>‘s code in this way<\/a> mostly to do with the virtuous decision to hive off specific business logic to the external Javascript textarea_talent.js<\/a>.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n

Text Functionality Issue<\/th>\nHTML Element Type<\/th>\nStrength<\/th>\nWeakness (where a “Yes” is like … “Oh No!”)<\/th<\/tr>\n
Display Monocolour Text<\/td>\nTextarea<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n
Div<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n
Display Editable Text<\/td>\nTextarea<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n
Div<\/th>\n<\/td>\nYes<\/td>\n<\/tr>\n
Display Multicolour Text<\/td>\nTextarea<\/th>\n<\/td>\nYes<\/td>\n<\/tr>\n
Div<\/th>\nYes<\/td>\n<\/td>\n<\/tr>\n