Textarea Pointing Local Font Event Paste Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Textarea Pointing Local Font Event Paste Tutorial

Textarea Pointing Local Font Event Paste Tutorial

Yesterdayโ€™s Textarea Pointing Local Font Event Usage Tutorialโ€˜s bugs have in large part been addressed today. Iโ€™d rather not discuss.

Moving forward, today, we catered for the possibilities of a paste operation delivered into our โ€œposseโ€ of โ€œtextareasโ€ โ€ฆ Clag salespeople perhaps? โ€ฆ on the scenario that we are using โ€œlocal fontsโ€, and when you use โ€œlocal fontsโ€ we want you to have many keyboard โ€œonkeypressโ€ events try and keep up with what you are typing โ€ฆ so we looked up the web and got the code below, largely thanks to this useful link (thanks) helps us out with โ€ฆ



// Thanks to https://stackoverflow.com/questions/3368578/trigger-a-keypress-keydown-keyup-event-in-js-jquery

function triggerEvent(el, type, keyCode) {

if ('createEvent' in document) {

// modern browsers, IE9+

var e = document.createEvent('HTMLEvents');

e.keyCode = keyCode;

e.initEvent(type, false, true);

el.dispatchEvent(e);

} else {

// IE 8

var e = document.createEventObject();

e.keyCode = keyCode;

e.eventType = type;

el.fireEvent('on'+e.eventType, e);

}

}



function pasted(element) {

setTimeout(function(){

if (dynamiccanvas) {

for (var iii=0; iii<element.value.length; iii++) {

triggerEvent(document.getElementById(focusto), 'keypress', element.value.substring(iii,eval(1 + iii)).charCodeAt());

}

}

}, 4);

}

โ€ฆ for HTML โ€œtextareaโ€ elements containing onpaste=โ€pasted(this);โ€ within their attributes.

As far as dealing with non-monospaced fonts, we again got good advice from the โ€œnetโ€ and used the code of this useful link (thanks) as below โ€ฆ



// Handy JavaScript to measure the size taken to render the supplied text;

// you can supply additional style information too if you have it.

// Thanks to https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript

function measureText(pText, pFontFamily, pFontSize, pStyle) {

var lDiv = document.createElement('div');




document.body.appendChild(lDiv);




if (pStyle != null) {

lDiv.style = pStyle;

}

lDiv.style.fontFamily = "" + pFontFamily;

lDiv.style.fontSize = "" + pFontSize.replace('px','') + "px";

lDiv.style.position = "absolute";

lDiv.style.left = -1000;

lDiv.style.top = -1000;




lDiv.innerHTML = pText + pText;




var lResult = {

width: lDiv.clientWidth,

height: lDiv.clientHeight

};




lResult.width/=2;

//lResult.width*=1.2;




document.body.removeChild(lDiv);

lDiv = null;




return lResult;

}

โ€ฆ to be constantly updating our Javascriptโ€™s global var charwh = {width: 0, height: 0}; so that real rendered character widths are calculated to allow us, when in โ€œlocal fontsโ€ mode, more reliably draw โ€œlocal fontโ€ linework and non-โ€œlocal fontโ€ characters alike with a suitable width for that Font Family and Font Style and Font Size combination.

And thanks to the wonderful rainbow colours webpage helping us out with our (tutti frutti) โ€œlocal fontsโ€ execution example as shown in todayโ€™s tutorial picture.

The liveโœ‚runโ€˜s textarea_pointingโšซhtm HTML and Javascript (DOM) and CSS changedthis way to continue down this โ€œuse of local fontsโ€ boulevard.



Previous relevant Textarea Pointing Local Font Event Usage Tutorial is shown below.

Textarea Pointing Local Font Event Usage Tutorial

Textarea Pointing Local Font Event Usage Tutorial

Today we embark on our journey to incorporate the โ€œlocal fontsโ€ of yesterdayโ€™s Textarea Pointing Local Font Colour Tutorial, and earlier, in real scenarios. The first cab off the rank is this web application, โ€œTextarea Pointingโ€ weโ€™ve been working on. We now allow you to (but need more refinement on the detail of) โ€ฆ

  • specify a font family which is a โ€œlocal fontโ€ name (which the user can arrange at the Javascript prompt window asking for this โ€œlocal fontโ€ name of use)
  • while you enter keyboard characters in the bank of โ€œtextareaโ€ elements we trap the onkeyup onkeypress event to obtain the (keyboard) character that was pressed, while already existant was functionality at the โ€œtextareaโ€ onclick event to have available to us that first โ€œtextareaโ€ top left position (that we then offset our position from based on font size characteristics and the onkeyup onkeypress detection of ascii code 13 for carriage return (to create a new line within the โ€œtextareaโ€))
  • as necessary, if the keyboard character has been digitised into the โ€œlocal fontโ€ record the โ€œlineworkโ€ of that character for that โ€œlocal fontโ€, else record the way that character would be placed as text, into the underlying HTML5 canvas element
  • as the user then next presses the โ€œCanvasโ€ button they see the results of this merging of default font with โ€œlocal fontโ€ rendering

Stop Press

New preference to use onkeypress is to do with its better interpretation (with respect to onkeyup) of those characters that share a keyboard button and are not letters nor numbers (eg. the comma). Thanks to this useful link and this Firefox good advice, thanks, for excellent information here.

โ€ฆ but, as you can see from todayโ€™s tutorial picture tweaking all this correctly, is a work in progress. Of course, one issue is that most fonts are not monospaced fonts, as Courier New is, so letters such as โ€œiโ€ take up a much smaller width to characters like โ€œmโ€ and โ€œwโ€ โ€ฆ oh! happy days?! Making it more generic is a work in progress too, but we are encouraged by the early workings of the โ€œproof of conceptโ€ parts to this โ€œlocal fontโ€ usage.

The liveโœ‚runโ€˜s textarea_pointingโšซhtm HTML and Javascript (DOM) and CSS changedthis way to start down this โ€œuse of local fontsโ€.


Previous relevant Textarea Pointing Local Font Colour Tutorial is shown below.

Textarea Pointing Local Font Colour Tutorial

Textarea Pointing Local Font Colour Tutorial

The normal way we deal with fonts online is to define a โ€ฆ

  • font family
  • font style
  • font size

โ€ฆ or say nothing and let the defaults happen. That can then be modified by a โ€ฆ

  • font colour

โ€ฆ and the whole sets of characters youโ€™ve defined these settings for will have those characteristics โ€œmappedโ€ onto them. However, with our โ€œlocal fontsโ€, we are making the rules (and though we are not sure this thinking will โ€œmapโ€ over to our work later, when we will try to have all this data capture amount to creating a real online font (weโ€™ll at least look into it)), and we are free to rejoin yesterdayโ€™s Textarea Pointing Local Font Editing Tutorialโ€˜s โ€ฆ

Did you notice how we differentiated the X co-ordinates as โ€œIntegersโ€ (ie. counting numbers) and did not say that about the Y co-ordinates? Thatโ€™s because we want some flexibility down the track to be able to add some business logic somewhere, but try not to break the basic delimitation rules of the design

โ€ฆ to take up the challenge of using an mantissa part to that Y co-ordinate consisting of (for the case of {startYCoord}) โ€ฆ



{startYCoord} is made up of {startIntegerYCoord}[.{Red3Digits}{Green3Digits}{Blue3Digits}]

โ€ฆ enabling what we like to call โ€œtutti fruttiโ€ ideas with your font characters, in that they can have multiple colours in their makeup at the font creation level. The creator of the local font can control this by setting a colour and then clicking on a previously digitized font character, to modify it for this new colour setting imbued in its co-ordinate makeup. Cute, huh?

In order to achieve that idea, we again needed to set up more โ€œinterplayโ€ between โ€ฆ


Previous relevant Textarea Pointing Local Font Editing Tutorial is shown below.

Textarea Pointing Local Font Editing Tutorial

Textarea Pointing Local Font Editing Tutorial

A basic design, as presented in the first of the โ€œLocal Fontโ€ thread of blog postings called Textarea Pointing Local Font Tutorial yesterday provided a blueprint to move forward on this project. We think we can work with its architecture. Did you notice how we differentiated the X co-ordinates as โ€œIntegersโ€ (ie. counting numbers) and did not say that about the Y co-ordinates? Thatโ€™s because we want some flexibility down the track to be able to add some business logic somewhere, but try not to break the basic delimitation rules of the design, but more on that idea later.

Today, we want to set about improving on aspects to the user experience (UX) of a user maintaining a โ€œlocal fontโ€. How would it be if I said to you to use this piece of functionality you had to repeat a set of actions 128 (-34 nonprintable inapplicables) times to complete a font set, and could not come back in just to edit one of those 128 (-34 nonprintable inapplicables) characters. Iโ€™d imagine youโ€™d be pretty unimpressed. By the end of today though โ€ฆ

  • yes, you still should complete, once, those 128 (-34 nonprintable inapplicables) font characters, to complete a โ€œlocal fontโ€ character set (of data captures) โ€ฆ but โ€ฆ
  • as we say, โ€œjust the onceโ€ โ€ฆ and โ€ฆ
  • a set that has only one character defined can still be worked with (and yes, weโ€™ll be getting to that in future tutorials), before you visit all/some of those 128 (-34 nonprintable inapplicables) characters โ€ฆ this blog post is hereby dedicated to Aliceโ€™s Restaurant โ€ฆ
  • any one font character edit (out of those 128 (-34 nonprintable inapplicables)) can have old attempts โ€œRetainedโ€ (where you see that old attempt, and add your new โ€œscribbleโ€ data to that old attempt, as required) or โ€œClearedโ€ (in order to start again) โ€ฆ as new HTML a tags added into our new โ€œlocal fontโ€ menu table
  • the user (has a mechanism now whereby they) can choose to now wipe the slate clean for a whole โ€œlocal fontโ€ name of their choosing, and start again with it, as required

In order to achieve that second last idea, we needed to set up more โ€œinterplayโ€ (such as making the nocookies= URL argument be able to contain the pen up/pen down instructions for an old attempt at the font character in question, as needed, and if not, signal a โ€œClearedโ€ scenario) among โ€ฆ

Hopefully this improves the web application, as far as the user using it goes. This may all sound pretty obvious, but often it is not easy to arrange to improve these aspects to your applications. It tends to matter (or not) on a case by case basis.


Previous relevant Textarea Pointing Local Font Tutorial is shown below.

Textarea Pointing Local Font Tutorial

Textarea Pointing Local Font Tutorial

A large part of the design of a web application relates to the agreed message formats. Yesterdayโ€™s Textarea Pointing Rasterise Tutorial started us down the road of a new message format whose delimitation highlights goes like an encodeURIComponent() version of โ€ฆ



{header}:[{startIntegerCoord}.{Red3Digits}{Green3Digits}{Blue3Digits}{Another3Digits}[,{nonStartIntegerCoords}*][;{startIntegerCoord}.{Red3Digits}{Green3Digits}{Blue3Digits}{Another3Digits}[,{nonStartIntegerCoords}*]*]*]

โ€ฆ where in general terms โ€œ,โ€ is โ€œpen downโ€ and โ€œ;โ€ is โ€œpen upโ€ (and โ€œ:โ€ separates a {header} from โ€œthe restโ€), and in yesterdayโ€™s thoughts โ€ฆ



{header} consists of {dataLength}.{numberOfPixelsInOneRowWidth}

โ€ฆ and because of this, these message types stand alone (important when designing a message format) in that any one {startIntegerCoord} or any of {nonStartIntegerCoords} could get an (x,y) co-ordinate set be defined via (for the case of {startIntegerCoord}) โ€ฆ



x = ({startIntegerCoord} % {numberOfPixelsInOneRowWidth})

y = (({startIntegerCoord} - x) / {numberOfPixelsInOneRowWidth})

But weโ€™ve digressed a little from todayโ€™s โ€œTextarea Pointing Local Font Tutorialโ€ topic havenโ€™t we? Well, not entirely, because the messages used to define our โ€œlocal fontsโ€ (yes, we are setting about a system of defining fonts local to other web applications on the same domain using [canvasContext].strokeText() or [canvasContext].fillText() (if we are interested), the storage means being as a few tutorials ago โ€ฆ

  • a fully blown database solution โ€ฆ too much โ€ฆ
  • HTTP Cookies โ€ฆ too little โ€ฆ
  • HTML5 Web Storage localStorage โ€ฆ just right

โ€ฆ hence the encodeURIComponent() bit to the blurb above) โ€ฆ will base themselves on the same delimitation rules, but itโ€™s just that, with โ€œlocal fontโ€ messaging โ€ฆ



{header} is {nameOfYourLocalFont}

โ€ฆ and that will not start with a number โ€ฆ now will it, โ€œcompliant userโ€? โ€ฆ so the logic should be able to categorize logic for those via โ€ฆ



{header}:[{startIntegerXCoord}.{Red3DigitsIsZero}{Green3DigitsIsZero}{Blue3DigitsIsZero}{asciiCharacterCodeIn3Digits}[,{startYCoord}]][{,{nonStartIntegerXCoord},{nonStartYCoord}}*][{;{penUpIntegerXCoord},{penUpYCoord}}*][{,{nonStartIntegerXCoord},{nonStartYCoord}}*]*]*]

Itโ€™s in our thinking to capture these co-ordinates via any/both of โ€ฆ

  1. textarea
  2. canvas

โ€ฆ but for todayโ€™s progress, just canvas work in an HTML iframe channeling our Signature Signature Primer Tutorialโ€˜s โ€œSignature of Signatureโ€ (hard working โ€œduckโ€ web application) examined โ€ฆ you guessed it โ€ฆ via a โ€œclient pre-emptive iframeโ€ determination of its existence. We limit the height and width of that HTML iframe to reflect the height and width of a font character, but bear with us if the size of this changes a bit over time. Weโ€™ll see. The iframe starts in โ€œscribbleโ€ data capture mode, reflecting you creating your own unique font character versions, hence the โ€œlocal fontโ€ concept.

In summary, codewise โ€ฆ


Previous relevant Textarea Pointing Rasterise Tutorial is shown below.

Textarea Pointing Rasterise Tutorial

Textarea Pointing Rasterise Tutorial

Following up on yesterdayโ€™s Textarea Pointing Web Storage Tutorial and Textarea Pointing Canvas Tutorial preceeding it, we have the means now to embellish the reporting functionalities surrounding the use of HTML5 canvas element, and two extremely useful (and fundamental) โ€ฆ

  • [canvasContext].getImageData() โ€ฆ to derive pixel information via canvas โ€ฆ and (itโ€™s what you do in the middle here that is the most impactive โ€ฆ we do inversing colours and grayscale manipulations via pixel changes here, in between) โ€ฆ
  • [canvasContext].putImageData() โ€ฆ to place pixel information into canvas

โ€ฆ and youโ€™ve also got the more geometrically based โ€ฆ

  • [canvasContext].translate()
  • [canvasContext].scale()
  • [canvasContext].rotate()

โ€ฆ do what they say, to create new image conversions for our (central) canvas element.

But of more interest, today, at least for us, is us starting down that โ€œreverse routeโ€ of scanning (post โ€œblobbingโ€). Even though two days ago we said โ€ฆ

This is all great, but thatโ€™s it, unless you want to run that image data back through an intelligent scanning process to try to regain the โ€œcharacter dataโ€? Some scanners do this, but do you really think you are going to continue getting a good result that way forever? We say, hang on to data in rawer forms and resolutions until the very last minute, and only go to these very well programmed for โ€œgraphicalโ€ forms (of final reporting) for your final reporting, or if you know that only that โ€œblobbyโ€ โ€œgraphicalโ€ form is all thatโ€™s required anyway. If so, think about using HTML canvas from the start. Itโ€™s data capture capabilities, as we at this blog have been at pains to point out for a long time now, are also excellent.

โ€ฆ we couldnโ€™t resist while we had the opportunity in code in between โ€ฆ

  • [canvasContext].getImageData() โ€ฆ to derive pixel information via canvas โ€ฆ and โ€ฆ
  • [canvasContext].putImageData() โ€ฆ to place pixel information into canvas

โ€ฆ to read canvas pixels and we โ€œRe-stringifyโ€ or (we label it) โ€œRasteriseโ€ the data to create the slightly shaky (but we may be able to improve it) first goes at re-scanning already โ€œblobbedโ€ out โ€œgraphicsโ€ data โ€ฆ just to see how far all this is feasible?! We need more work retaining non black and white colours, and weโ€™ll let you know more about that as time goes on, but in the meantime โ€ฆ

Todayโ€™s liveโœ‚runโ€˜s textarea_pointingโšซhtm HTML and Javascript (DOM) and CSS canvasmanipulation changes and rasterisationchanges helped out with these canvas based manipulations, and called into play โ€œclient pre-emptive iframeโ€ determinations of whether thechanges needed to integrate pixellateโšซphpโ€˜s GD Image Manipulations at the Pixel Level we last talked about with PHP GD Image at Pixel Level Animation Rotation Tutorial can take us further down the โ€œpixellatedโ€ road of discovery swear, โ€˜guv, it was only lemonade in that there flask.


Previous relevant Textarea Pointing Web Storage Tutorial is shown below.

Textarea Pointing Web Storage Tutorial

Textarea Pointing Web Storage Tutorial

We add some โ€œaccountabilityโ€ to where we stopped off at yesterday with Textarea Pointing Canvas Tutorial today. We define โ€œaccountabilityโ€ in this context, and with our rules, short of bothering with โ€ฆ

  • a fully blown database solution โ€ฆ too much โ€ฆ
  • HTTP Cookies โ€ฆ too little โ€ฆ
  • HTML5 Web Storage localStorage โ€ฆ just right

Porridge is served! How to make this decision? To us, it goes by โ€œpermanence factorโ€ (database really good) and โ€œdata size requirementsโ€ (and today we store the whole innerHTML of the HTML form that encompasses all our โ€œtextarea posseโ€ and this is far too much for HTTP Cookies โ€ฆ so HTML5 localStorage is our decision).

There are these aspects to doing this โ€ฆ

  • in the menu section of the webpage have one select element id=ssaveas (dropdown) (with an initial option element labelled โ€œFill in Save As or chooseโ€) and one input type=text element
  • at document.body onload event look through localStorage โ€ฆ as per the Javascript โ€ฆ


    if (window.localStorage) {

    for (var iq in window.localStorage) {

    val = localStorage.getItem(iq);

    if (val) {

    if (iq.substring(0,3) == 'tp_') {

    document.getElementById('ssaveas').innerHTML+='<option value="' + iq.substring(3) + '">Recall "' + iq.substring(3) + '"</option>';

    }

    }

    }

    }


    โ€ฆ to further populate, as necessary, the dropdown, that has โ€ฆ
  • onchange event for select element dropdown reads localStorage โ€ฆ as per Javascript (for variable newo being that webpage snapshotโ€™s name) โ€ฆ as entered by user โ€ฆ


    if (localStorage) {

    if (localStorage.getItem('tp_' + newo)) {

    var bih=decodeURIComponent(localStorage.getItem('tp_' + newo));

    document.getElementById('myform').innerHTML=bih;

    }

    }

  • at onblur event of the input type=text element โ€ฆ Javascript (for variable newo being that webpage snapshotโ€™s name and variable hcont is the HTML code for a โ€œNew Windowโ€ scenario) as per โ€ฆ


    if (newo != '') {

    if (localStorage) {

    if (localStorage.getItem('tp_' + newo)) {

    localStorage.removeItem('tp_' + newo);

    }

    var bbit='m' + hcont.split('<f' + 'orm')[1].split('>')[0] + '>';

    localStorage.setItem('tp_' + newo, encodeURIComponent(hcont.split('<fo' + 'r')[1].replace(bbit,'').split('</f' + 'orm>')[0]));

    document.getElementById('ssaveas').innerHTML+='<option value="' + newo + '">Recall "' + newo + '"</option>';

    }

    }

Todayโ€™s liveโœ‚runโ€˜s textarea_pointingโšซhtm HTML and Javascript (DOM) and CSS codechanges were all clientside, like yesterdayโ€™s work.

Accountability food for thought, we hope?!


Previous relevant Textarea Pointing Canvas Tutorial is shown below.

Textarea Pointing Canvas Tutorial

Textarea Pointing Canvas Tutorial

With our blog posting thread last left off with yesterdayโ€™s Textarea Pointing PDF Tutorial, I know weโ€™ve been holding out on involving โ€ฆ

โ€ฆ not for โ€œnga, nga, nga nga, ngaโ€ reasons, but because we want to show that the starting out with โ€œtextarea character dataโ€ sets is a useful layer of information that can sit on top and easily pass onto these (last two above in particular) functionalities above in optional reporting modes of use, but still keep that โ€œtextual contextโ€ in place as well. Win, win, weโ€™d say.

However, on non-mobile web browsers in particular, youโ€™ve got to appreciate how the modern browsers interface to canvas elements and image data (which can be derived from that canvas element by the oft mentioned [canvasElement].toDataURL() method) with a myriad of right click (Windows or two finger gesture on Mac OS X) options, our favourites of which are โ€ฆ

  • image โ€“ Open Image in New Tab (or Window)
  • image โ€“ Save Image to Desktop
  • image โ€“ Save Image Asโ€ฆ
  • image โ€“ Copy Image
  • image โ€“ Share Mail (to client email (ie. your own email address is โ€œFromโ€ email address) as image attachment)
  • image โ€“ Share Message
  • canvas โ€“ Save Page as Web Archive
  • canvas โ€“ Print Pageโ€ฆ Open PDF in PDF Reader
  • canvas โ€“ Print Pageโ€ฆ Save As PDF
  • canvas โ€“ Print Pageโ€ฆ Save As PostScript
  • canvas โ€“ Print Pageโ€ฆ Mail PDF (to client email (ie. your own email address is โ€œFromโ€ email address) with a PDF attachment)

โ€ฆ so much so that we just want all this clientside (no PHP serverside โ€œanythingโ€ today) to wash over you with your mind โ€œswimmingโ€ with possibilities, perhaps?!

Take a look at todayโ€™s liveโœ‚runโ€˜s textarea_pointingโšซhtm HTML and Javascript (DOM) and CSS code changed thisway as all that needed to change to involve canvas and image data and data URIs in our Textarea Pointing project.

If there is no serverside โ€œanythingโ€ going on, what is the โ€œglueโ€ that holds all this clientside interfacing together? These days, more and more, it is the use of data URI portable data that can be used in, just with todayโ€™s work โ€ฆ

  • HTML img element src attribute
  • HTML img element style attribute background URL(data URI)

This is all great, but thatโ€™s it, unless you want to run that image data back through an intelligent scanning process to try to regain the โ€œcharacter dataโ€? Some scanners do this, but do you really think you are going to continue getting a good result that way forever? We say, hang on to data in rawer forms and resolutions until the very last minute, and only go to these very well programmed for โ€œgraphicalโ€ forms (of final reporting) for your final reporting, or if you know that only that โ€œblobbyโ€ โ€œgraphicalโ€ form is all thatโ€™s required anyway. If so, think about using HTML canvas from the start. Itโ€™s data capture capabilities, as we at this blog have been at pains to point out for a long time now, are also excellent.

Another Paul Kelly song seems apt!


Previous relevant Textarea Pointing PDF Tutorial is shown below.

Textarea Pointing PDF Tutorial

Textarea Pointing PDF Tutorial

Yesterdayโ€™s Textarea Pointing Email Tutorial was a start to our โ€œsharingโ€ functionality โ€œpushโ€ with our new Textarea Pointing project. That work involved โ€ฆ

  • (new window) with menu
  • (new window) without menu
  • email with HTML attachment โ€ฆ and today we add to that โ€ฆ
  • email with PDF attachment โ€ฆ as well as โ€ฆ
  • PDF download to client device
  • PDF display via default client PDF viewer

โ€ฆ that required, again, Linux diff PDF Tutorial liveโœ‚runโ€˜s prediffphp PHP code integration inthis changed way. This time, though, rather than $outputpdf->Cell($x, $y, $line_of_text); being the best Fpdf means of displaying of the PDF text, we found โ€ฆ



$outputpdf->Text($x, $y, $line_of_text);

โ€ฆ to be more applicable to programming like for the way vinyl records work with their stylus, in other words, at a given โ€ฆ

  • HTML textarea element (x,y) position โ€ฆ we gather โ€ฆ
  • HTML textarea element font information stored in the alt attribute โ€ฆ to place text โ€ฆ
  • to be able to โ€ฆ
    $outputpdf->SetFont($fontFamily, $fontStyle, $fontSize);
    $outputpdf->SetTextColor($fontColR, $fontColG, $fontColB);
    $outputpdf->Text($x, $y, $line_of_text);

โ€ฆ as the โ€œwork of the codeโ€ needed to transition from our โ€œuser capture with character dataโ€ (in the โ€œtextareaโ€s) to a graphical system (or โ€œwidgetโ€, you might like to think of this as). It just so happens that the first (graphical) โ€œwidgetโ€ design of interest is the creation of PDF, as it is a good conduit between โ€œcharacter dataโ€ and a โ€œgraphical lookโ€. A โ€œwidgetโ€ feeling thing being what it is though, expect more integrations to come, as time goes on!

Todayโ€™s liveโœ‚runโ€˜s textarea_pointingโšซhtm code changed thisway.


Previous relevant Textarea Pointing Email Tutorial is shown below.

Textarea Pointing Email Tutorial

Textarea Pointing Email Tutorial

Yesterdayโ€™s Textarea Pointing Primer Tutorial was a little too localised in its application in our books. Not if a web application is not of generic use, but this one could be of generic use, in our pamphlettes books.

Our favourite โ€œsharingโ€ idea is email, by far, as today, as far as that goes, we are going to offer email โ€œservicesโ€ via a โ€œclient pre-emptive iframeโ€ determination of whether where you have placed todayโ€™s liveโœ‚runโ€˜s textarea_pointingโšซhtm code (changed thisway) has, relative to it, an existant ../PHP/Geographicals/prediff.php PHP code source (that we left to go on our Textarea Pointing project) of Linux diff PDF Tutorial (liveโœ‚runโ€˜s prediffphp PHP codeโ€™s lastchanges were used to cater for the Textarea Pointing HTML email attachment requirement).

We like to use a โ€œclient pre-emptive iframeโ€ technique initial check for whether the HTML finds prediff.php because the email functionality is optional after all. If prediff.php is not found, then the Email button is never shown, simple as that. But the other two displays of the HTML in new popup windows โ€ฆ

  • with menu
  • without menu โ€ฆ as well as โ€ฆ
  • email with HTML attachment

โ€ฆ complete the scope of the new โ€œSharingโ€ functionalities today, and this year, on this!

So โ€ฆ Happy New Year!


Previous relevant Textarea Pointing Primer Tutorial is shown below.

Textarea Pointing Primer Tutorial

Textarea Pointing Primer Tutorial

Completely new idea today, so hoping this does not put some of you โ€œepisodicโ€ users off. Weโ€™ll get back to incomplete recent โ€œthreadsโ€ at a later date. This is because we had pause for thought, due to yesterdayโ€™s PDF textual data positioning work, regarding one of our favourite HTML fundamental element types of interest (that we are always comparing) โ€ฆ

To quote HTML Textarea and Div Talents Primer Tutorial (as it was addressing the textarea HTML element) โ€ฆ

Itโ€™s crucial for getting HTML or non-caretted Text (that is internally turned into HTML behind the scenes) โ€ฆ via those wonderful tabs โ€ฆ 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 element, the other โ€œtalentโ€ here.

But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things โ€ฆ

Text Functionality Issue HTML Element Type Strength Weakness (where a โ€œYesโ€ is like โ€ฆ โ€œOh No!โ€)
Display Monocolour Text Textarea Yes
Div Yes
Display Editable Text Textarea Yes
Div Yes
Display Multicolour Text Textarea Yes
Div Yes

Nothing there above gives much encouragement about the HTML textareaโ€˜s โ€œpositioningโ€ talents. But what if we were to create a โ€œposseโ€, or perhaps a โ€œphalanxโ€, of โ€œtextareaโ€s to bank up with โ€œbits and piecesโ€ of the positioning โ€œissueโ€ (under the auspices of an HTML form element, for later accountability)?

What do we mean by โ€œissueโ€ here? Well, something like a letter, as with the end product of a scanning process involving a hardcopy letter, is that much more useful if what we end up with is the โ€œcharactersโ€ that go to make up that letter (or report, or essay), not some graphic (or totally visual) encapsulation of it, which can be what happens when you involve as your HTML โ€œcaptureโ€ element the โ€œcanvasโ€ element. No, we want that โ€œposseโ€ of โ€œtextareaโ€s be that โ€œcharacterโ€ source, which later, we can present as an overall graphic at a later date, for sharing purposes for instance, and maintain the โ€œletterโ€ (or report or essay) data continuously as the user edits.

How to do? We click/touch with a base โ€œtextareaโ€ and that is enough to arrange for an โ€œoverlayโ€ โ€œtextareaโ€ (via CSS position:absolute and z-index properties, some background-color:transparent styling, along with div id=dscript (innerHTML) appended dynamic CSS styling making use of CSS calcโ€˜ing <style> .mboard2 { width: calc(85% โ€“ 56px); } </style> type syntax (where the 56px would have been derived via the onclick event logic, the 85% is to allow for a 15% width menu at the right, and the 2 in mboard2 refers to the second textarea in question)) to follow (ironically an HTML div element is by far the best โ€œcontainerโ€ in a (Javascript DOM controlled) linked list fashion for this, rather than appending to the HTML form elementโ€™s innerHTML (which seems to wipe out previous textarea values)), like a linked list of โ€œtextareaโ€s. Along the way we allow for font information to be collected and kept as well (for now, via the textareaโ€˜s alt attribute), to add to the chances for variety with our overall โ€œletterโ€ (or report or essay) reporting end product.

Which leaves us to talk about the โ€œtextarea pointingโ€ liveโœ‚runโ€˜s underlying HTML and Javascript and CSS textarea_pointingโšซhtml code for your perusal.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *