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 liverunโ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.
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
onkeyuponkeypress 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 theonkeyuponkeypress 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 liverunโ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.
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 โฆ
- Todayโs live
runโs textarea_pointing
htm HTML and Javascript (DOM) and CSS changedthis way to allow for these new โcolourfulโ local โFont Creationโ canvas editing functionalities โฆ supervising โฆ
- Called HTML and Javascript and CSS (with the canvas element) signature_signature
html changedthis way sharing canvas co-ordinates when a parent web application is interested in โrasterizationsโ, sometimes colourful
Previous relevant Textarea Pointing Local Font Editing Tutorial is shown below.
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 โฆ
- Todayโs live
runโs textarea_pointing
htm HTML and Javascript (DOM) and CSS changedthis way to allow for these new local โFont Creationโ canvas editing functionalities โฆ supervising โฆ
- Called HTML and Javascript and CSS (with the canvas element) signature_signature
html changedthis way sharing canvas co-ordinates when a parent web application is interested in โrasterizationsโ โฆ and calling โฆ
- External Javascript called signature_signature
js changedthis way regarding stopping localStorage and HTTP Cookie logic within its usual logic (collecting peopleโs signatures, that is, and more had to change regarding its workings for โlocal fontโ work)
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.
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 โฆ
โฆ 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 โฆ
- Todayโs live
runโs textarea_pointing
htm HTML and Javascript (DOM) and CSS changedthis way to allow for these new local โFont Creationโ (initially via canvas) logics available as (non default) options off an HTML select element dropdown (hived off the web application H1 title) โฆ supervising, newly โฆ
- Called HTML and Javascript and CSS (with the canvas element) signature_signature
html changedthis way sharing canvas co-ordinates when a parent web application is interested in โrasterizationsโ โฆ and calling โฆ
- External Javascript called signature_signature
js changedthis way regarding stopping localStorage and HTTP Cookie logic within its usual logic (collecting peopleโs signatures, that is)
Previous relevant Textarea Pointing Rasterise Tutorial is shown below.
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 liverunโ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.
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 liverunโ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.
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 liverunโ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.
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 liverunโ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 liverunโs textarea_pointing
htm code changed thisway.
Previous relevant Textarea Pointing Email Tutorial is shown below.
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 liverunโ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.
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โ liverunโ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.