<del>: The Deleted Text element - HTML: Hypertext Markup Language
content categories phrasing content or flow content. permitted content transparent. ...
... content categories phrasing content or flow content. permitted content transparent. ...
... content categories phrasing content or flow content. permitted content transparent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
...And 2 more matches

<mark>: The Mark Text element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
...ermitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes typical use cases for <mark> include: when used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. think of this like using a highlighter pen in a book to mark passages that you find of interest. otherwise, <mark> indicates a portion of the document's content which is likely to be relevant to the ...
...relevant to the user's current activity. this might be used, for example, to indicate the words that matched a search operation. don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate css applied to it. don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance. examples marking text of interest in this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user. <blockquote> it is a period of civil war. rebel spaceships, striking from a hidden base, have won their first victory against the evil galactic empire. during the battle, <mark>rebel spies managed to steal secre...
...And 2 more matches

CanvasRenderingContext2D.textBaseline - Web APIs
the canvasrenderingcontext2d.textbaseline property of the canvas 2d api specifies the current text baseline used when drawing text. syntax ctx.textbaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; options possible values: "top" the text baseline is the top of the em square. "hanging" the text baseline is the hanging baseline. (used by tibetan and other indic scripts.) "middle" the text baseline is the middle of the em square. "alphabetic" the text baseline is the normal alphabetic baseline. default value. "ideographic" the text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (used by chinese, japanese, and korean scripts.) "b...
...ts.) "middle" the text baseline is the middle of the em square. "alphabetic" the text baseline is the normal alphabetic baseline. default value. "ideographic" the text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (used by chinese, japanese, and korean scripts.) "bottom" the text baseline is the bottom of the bounding box. this differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders. the default value is "alphabetic". examples comparison of property values this example demonstrates the various textbaseline property values. html <canvas id="canvas" width="550" height="500"></canvas> javascript const canvas = document.get...
...s differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders. the default value is "alphabetic". examples comparison of property values this example demonstrates the various textbaseline property values. ...
...es the various textbaseline property values. html <canvas id="canvas" width="550" height="500"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; ctx.font = '36px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 75 + index * 75; ctx.beginpath(); ctx.moveto(0, y + 0.5); ctx.lineto(550, y + 0.5); ctx.stroke(); ctx.filltext('abcdefghijklmnop (' + baseline + ')', 0, y); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textbaseline' in that specification. living stan...

WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
the webgl2renderingcontext.framebuffertexturelayer() method of the webgl 2 api attaches a single layer of a texture to a framebuffer. this method is similar to webglrenderingcontext.framebuffertexture2d(), but only a given single layer of the texture level is attached to the attachment point. syntax void gl.framebuffertexturelayer(target, attachment, texture, level, layer); parameters target a glenum specifying the binding point (target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible value...
... (target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible values: gl.color_attachment{0-15}: attaches the texture to one of the framebuffer's color buffers. ...
..., alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible values: gl.color_attachment{0-15}: attaches the texture to one of the framebuffer's color buffers. gl.depth_attachment: attaches the texture to the framebuffer's depth buffer. gl.stencil_attachment: attaches the texture to the framebuffer's stencil buffer. gl.depth_stencil_attachment: depth and stencil buffer. texture a webgltexture object whose image to attach. level a glint specifying the mipmap level of the texture image to attach. layer a glint specifying the layer of the texture image to attach. return value n...
... buffer. gl.stencil_attachment: attaches the texture to the framebuffer's stencil buffer. gl.depth_stencil_attachment: depth and stencil buffer. texture a webgltexture object whose image to attach. level a glint specifying the mipmap level of the texture image to attach. layer a glint specifying the layer of the texture image to attach. return value none. examples gl.framebuffertexturelayer(gl.framebuffer, gl.color_attachment0, texture, 0, 8); specifications specification status comment webgl 2.0the definition of 'framebuffertexturelayer' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glframebuffertexturelayer' in that specification. standard man pa...

WebGLRenderingContext.bindTexture() - Web APIs
the webglrenderingcontext.bindtexture() method of the webgl api binds a given webgltexture to a target (binding point). syntax void gl.bindtexture(target, texture); parameters target a glenum specifying the binding point (target). possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. texture a webgltexture object to bind. return value none. exceptions a gl.invalid_enum error is thrown if target is not gl.texture_2d, gl.texture_cube_map, gl.texture_3d, or gl.texture_2d_array. ...
...ntext, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. texture a webgltexture object to bind. return value none. exceptions a gl.invalid_enum error is thrown if target is not gl.texture_2d, gl.texture_cube_map, gl.texture_3d, or gl.texture_2d_array. examples binding a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); getting current bindings to check the current texture binding, query the gl.texture_binding_2d or gl.texture_binding_cube_map constants. ...
..._cube_map, gl.texture_3d, or gl.texture_2d_array. examples binding a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); getting current bindings to check the current texture binding, query the gl.texture_binding_2d or gl.texture_binding_cube_map constants. gl.getparameter(gl.texture_binding_2d); specifications specification status comment webgl 1.0the definition of 'bindtexture' in that specification. recommendation initial definition for webgl. opengl es 2.0the definition of 'glbindtexture' in that specification. standard man page of the (similar) opengl es 2.0 api. ...
...parameter(gl.texture_binding_2d); specifications specification status comment webgl 1.0the definition of 'bindtexture' in that specification. recommendation initial definition for webgl. opengl es 2.0the definition of 'glbindtexture' in that specification. standard man page of the (similar) opengl es 2.0 api. webgl 2.0the definition of 'bindtexture' in that specification. editor's draft updated definition for webgl 2. adds: gl.texture_3d and gl.texture_2d_array opengl es 3.0the definition of 'glbindtexture' in that specification. standard man page of the (similar) opengl es 3.0 api. ...

<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
...ed parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element's attributes include the global attributes. ...
...ing role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element's attributes include the global attributes. dir the direction in which text should be rendered in this element's contents. possible values are: ltr: indicates that the text should go in a left-to-right direction. rtl: indicates that the text should go in a right-to-left direction. examples <!-- switch text direction --> <p>this text will go left to right.</p> <p><bdo dir="rtl">this text will go right to left.</bdo></p> result notes the html 4 specification did not specify events for this element; they were added in xhtml. this is most likely an oversi...

<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
whitespace inside this element is displayed as written. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. ...
... must happen. in modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use css white-space instead. example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text. the alternate description should clearly and concisely describe the image or diagram's content. people experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence. a combination of the <figure> and <figcaption> elements, supplemented by a...
... example <figure role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field. ...
... role="img" aria-labelledby="cow-caption"> <pre> ___________________________ < i'm an expert in my field. > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> a cow saying, "i'm an expert in my field." the cow is illustrated using preformatted text characters. </figcaption> </figure> mdn understanding wcag, guideline 1.1 explanations h86: providing text alternatives for ascii art, emoticons, and leetspeak | w3c techniques for wcag 2.0 specifications specification status comment html living standardthe definition of '<pre>' in that specification. living standard no significant change from html5 ...

WEBGL_lose_context.loseContext() - Web APIs
the webgl_lose_context.losecontext() method is part of the webgl api and allows you to simulate losing the context of a webglrenderingcontext context. it triggers the steps described in the webgl specification for handling context lost. the context will remain lost until webgl_lose_context.restorecontext() is called. syntax gl.getextension('webgl_lose_context').losecontext(); examples with this method, you can simulate the webglcontextlost event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged. specifications specification status ...
... recommendation initial definition. ...
...ment.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged. specifications specification status comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification. recommendation initial definition. ...

WebGLRenderingContext.activeTexture() - Web APIs
the webglrenderingcontext.activetexture() method of the webgl api specifies which texture unit to make active. syntax void gl.activetexture(texture); parameters texture the texture unit to make active. the value is a gl.texturei where i is within the range from 0 to gl.max_combined_texture_image_units - 1. return value none. exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown. examples the following call selects gl.texture1 as the current texture. subsequent calls that modify the texture state will affect this texture. ...
...ange from 0 to gl.max_combined_texture_image_units - 1. return value none. exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown. examples the following call selects gl.texture1 as the current texture. subsequent calls that modify the texture state will affect this texture. gl.activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the max_combined_texture_image_units constant. it is, per specification, at least 8. gl.getparameter(gl.max_combined_texture_image_units); to get the active texture, query the active_texture constant. ...
...at modify the texture state will affect this texture. gl.activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the max_combined_texture_image_units constant. it is, per specification, at least 8. gl.getparameter(gl.max_combined_texture_image_units); to get the active texture, query the active_texture constant. gl.activetexture(gl.texture0); gl.getparameter(gl.active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status comment webgl 1.0the definition of 'activetexture' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glactivetexture' in that specification. standard man page of the open...

WebGLRenderingContext.isContextLost() - Web APIs
the webglrenderingcontext.iscontextlost() method returns a boolean indicating whether or not the webgl context has been lost and must be re-established before rendering can resume. syntax let islost = gl.iscontextlost(); return value a boolean which is true if the context is lost, or false if not. usage notes there are several reasons why a webgl context may be lost, making it necessary to re-establish the context before resuming rendering. examples include: two or more pages are using the gpu, but together place too high a demand on the gpu, so the browser tells the two contexts that they've lost the connection, then selects one of the two to restore access for. the user's computer has multiple graphics processors (such as a laptop with both mobile and desktop class gpus, the forme...
... together place too high a demand on the gpu, so the browser tells the two contexts that they've lost the connection, then selects one of the two to restore access for. the user's computer has multiple graphics processors (such as a laptop with both mobile and desktop class gpus, the former used primarily when on battery power), and the user or system decides to switch gpus. in this case, all contexts are lost, then restored after switching gpus. another page running in the user's browser performs an operation using the gpu that takes too long, causing hte browser to decide to reset the gpu in order to break the stall. this would cause every webgl context to be lost throughout the entire browser. the user updates their graphics driver on an operating system that allows graphics drivers to b...
...oo long, causing hte browser to decide to reset the gpu in order to break the stall. this would cause every webgl context to be lost throughout the entire browser. the user updates their graphics driver on an operating system that allows graphics drivers to be updated without restarting the system. examples for example, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if (!gl.getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.iscontextlost' in that specification. recommendation initi...

Text.replaceWholeText() - Web APIs
the text.replacewholetext() method replaces the text of the node and all of its logically adjacent text nodes with the specified text. the replaced nodes are removed, including the current node, unless it was the recipient of the replacement text. a domexception with the value no_modification_err is thrown if one of the text nodes being replaced is read only. this method returns the text node which received the replacement text, or null if the replacement text is an empty string. the returned node is the current node unless the current node is read only, in which case the returned node is a newly created text node of the same type which has been inserted at the location of the replacement. ...
...odes being replaced is read only. this method returns the text node which received the replacement text, or null if the replacement text is an empty string. the returned node is the current node unless the current node is read only, in which case the returned node is a newly created text node of the same type which has been inserted at the location of the replacement. syntax replacementnode = textnode.replacewholetext(content) example see the example for the text.wholetext property. specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'text' in that specification. obsolete initial definition. ...

<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete html center element (<center>) is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. the container is usually, but isn't required to be, <body>. this tag has been deprecated in html 4 (and xhtml 1) in favor of the css text-align property, which can be applied to the <div> element or to an individual <p>. for centering blocks, use other css properties like margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <center>this text will be centered. <p>so will this paragraph.</p></center> ex...
...like margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <center>this text will be centered. <p>so will this paragraph.</p></center> example 2 (css alternative) <div style="text-align:center">this text will be centered. <p>so will this paragraph.</p></div> example 3 (css alternative) <p style="text-align:center">this line will be centered.<br> and so will this line.</p> note applying text-align:center to a <div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged. ...

<nobr>: The Non-Breaking Text element (obsolete) - HTML: Hypertext Markup Language
this element was never standard html and was not widely implemented, so you shouldn't use it. ...
... this element was never standard html and was not widely implemented, so you shouldn't use it. ...

<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete html teletype text element (<tt>) creates inline text which is presented using the user agent's default monospace font face. this element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer. the terms non-proportional, monotype, and monospace are used interchangeably and have the same general meaning: they describe a typeface whose characters are all the same number of pixels wide. this element is obsolete, however. you should use the more semantically helpful <code>, <kbd>, <samp>, or <var> elements for inline text that needs to be presented in monospace type, or the <pre> tag for content that should be presented as a separate block. if none of the semantic elements are appropr...
... permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes examples basic example this example uses <tt> to show text entered into, and output by, a terminal application. <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result overriding the default font you can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using css: css tt { font-family: "...

CanvasRenderingContext2D.measureText() - Web APIs
the canvasrenderingcontext2d.measuretext() method returns a textmetrics object that contains information about the measured text (such as its width, for example). syntax ctx.measuretext(text); parameters text the text string to measure. return value a textmetrics object. example given this <canvas> element: <canvas id="canvas"></canvas> ... you can get a textmetrics object using the following code: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let text = ctx.measuretext('hello world'); console.log(text.width); // 56; specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.measuretext' in that specification. living standard ...

WEBGL_lose_context.restoreContext() - Web APIs
the webgl_lose_context.restorecontext() method is part of the webgl api and allows you to simulate restoring the context of a webglrenderingcontext object. syntax gl.getextension('webgl_lose_context').restorecontext(); errors thrown invalid_operation if the context was not lost. examples with this method, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); specifications specification status comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification. recommendation initial definition.

WebGLRenderingContext.createTexture() - Web APIs
the webglrenderingcontext.createtexture() method of the webgl api creates and initializes a webgltexture object. syntax webgltexture gl.createtexture(); parameters none. return value a webgltexture object to which images can be bound to. examples see also the webgl tutorial on using textures in webgl. creating a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); specifications specification status comment webgl 1.0the definition of 'createtexture' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgentextures' in that specification. standard man page of the (similar) opengl api. ...

WebGLRenderingContext.deleteTexture() - Web APIs
the webglrenderingcontext.deletetexture() method of the webgl api deletes a given webgltexture object. this method has no effect if the texture has already been deleted. syntax void gl.deletetexture(texture); parameters texture a webgltexture object to delete. return value none. examples deleting a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); // ... gl.deletetexture(texture); specifications specification status comment webgl 1.0the definition of 'deletetexture' in that specification. recommendation initial definition. opengl es 2.0the definition of 'gldeletetextures' in that specification. standard man page of the (similar) opengl api. ...

WebGLRenderingContext.isTexture() - Web APIs
the webglrenderingcontext.istexture() method of the webgl api returns true if the passed webgltexture is valid and false otherwise. syntax glboolean gl.istexture(texture); parameters texture a webgltexture to check. return value a glboolean indicating whether or not the texture is valid. examples checking a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); gl.istexture(texture); specifications specification status comment webgl 1.0the definition of 'istexture' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glistexture' in that specification. standard man page of the opengl api. ...

<big>: The Bigger Text element - HTML: Hypertext Markup Language
the obsolete html big element (<big>) renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example). the size is capped at the browser's maximum permitted font size. usage note: as it was purely presentational, this element has been removed in html5 and shouldn't be used anymore. instead web developers should use the css font-size property to adjust the font size. attributes this element has no other attributes than the global attributes, common to all elements. examples here we see examples showing the use of <big> followed by an example showing how to accomplish the same results using modern css syntax instead. using <big> this example uses the obsolete <big> element to increase the size of some text. html <p> this is...

<blink>: The Blinking Text element (obsolete) - HTML: Hypertext Markup Language
dom interface this element is unsupported and thus implements the htmlunknownelement interface. example <blink>why would somebody use this?</blink> result (toned down!) specification this element is non-standard and not part of any specification. if you don't believe us, see for yourself in the html spec. ...

<rt>: The Ruby Text element - HTML: Hypertext Markup Language
the <rt> element must always be contained within a <ruby> element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see the article about the <ruby> element for more examples. content categories none. permitted content phrasing content. ...

<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
<rb> elements can have both pronunciation (<rt>) and semantic (<rtc>) annotations. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content phrasing content or <rt> elements. tag omission the closing tag can be omitted if it is immediately followed by a <rb>, <rtc> or <rt> element opening tag or by its parent closing tag. permitted parents a <ruby> element. ...

HTML documentation index - HTML: Hypertext Markup Language
it defines the meaning and structure of web content. other technologies besides html are generally used to describe a web page's appearance/presentation (css) or functionality/behavior (javascript). ...
...ents using css beginner, css, css colors, guide, html, html colors, html styles, styling html, color with css, there are lots of ways to add color to your html elements to create just the look you want. this article is a primer introducing each of the ways css color can be used in html. 4 block-level elements beginner, development, guide, html, html5, web html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements. by default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." this article helps to explain what this means. 5 dash adaptive streaming for html 5 video guide, html, html5 dynamic adaptive streaming ov...
...a hint for generating a keyboard shortcut for the current element. the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard). 9 autocapitalize autocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. 10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname. ...
...And 79 more matches

context-menu - Archive of obsolete content
adds items, submenus, and menu separators to the page's context menu. usage instead of manually adding items when particular contexts occur and then removing them when those contexts go away, you bind items to contexts, and the adding and removing is automatically handled for you. items are bound to contexts in much the same way that event listeners are bound to events. when the user invokes the context menu, all of the items bound to the current context are automatically added to the menu. if no items are bound, none are added. likewise, any items that were previously in the menu but are not bound to the current context are automatically removed from the menu. you never need to manually remove your items from the menu unless you want them to never appear again. for example, if your add-...
...the items bound to the current context are automatically added to the menu. if no items are bound, none are added. likewise, any items that were previously in the menu but are not bound to the current context are automatically removed from the menu. you never need to manually remove your items from the menu unless you want them to never appear again. for example, if your add-on needs to add a context menu item whenever the user visits a certain page, don't create the item when that page loads, and don't remove it when the page unloads. rather, create your item only once and supply a context that matches the target url. context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. menu items for each add-on will be grouped together automati...
...t create the item when that page loads, and don't remove it when the page unloads. rather, create your item only once and supply a context that matches the target url. context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. menu items for each add-on will be grouped together automatically. if the total number of menu items in the main context menu from all add-ons exceeds a certain number (normally 10 but configurable with the extensions.addon-sdk.context-menu.overflowthreshold preference) all of the menu items will instead appear in an overflow menu to avoid making the context menu too large. ...
...And 69 more matches

HTML text fundamentals - Learn web development
previous overview: introduction to html next one of html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly. this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more. prerequisites: basic html familiarity, as covered in getting started with html. objective: learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations. the basics: headings and paragraphs most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc. structured conte...
... results. of the six heading levels available, you should aim to use no more than three per page, unless you feel it is necessary. documents with many levels (i.e., a deep heading hierarchy) become unwieldy and difficult to navigate. on such occasions, it is advisable to spread the content over multiple pages if possible. why do we need structure? to answer this question, let's take a look at text-start.html—the starting point of our running example for this article (a nice hummus recipe). you should save a copy of this file on your local machine, as you'll need it for the exercises later on. this document's body currently contains multiple pieces of content—they aren't marked up in any way, but they are separated with linebreaks (enter/return pressed to go onto the next line). howeve...
...ticle (a nice hummus recipe). you should save a copy of this file on your local machine, as you'll need it for the exercises later on. this document's body currently contains multiple pieces of content—they aren't marked up in any way, but they are separated with linebreaks (enter/return pressed to go onto the next line). however, when you open the document in your browser, you'll see that the text appears as a big chunk! this is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. furthermore: users looking at a web page tend to scan quickly to find relevant content, often just reading the headings to begin with. (we usually spend a very short time on a web page.) if they can't see anything useful within ...
...And 54 more matches

Fundamental text and font styling - Learn web development
overview: styling text next in this article we'll start you on your journey towards mastering text styling with css. here we'll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing. prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css). objective: to learn the fundamental properties and techniques needed to style text on web pages. what is involved in styling text in css? as you'll have already experienced in your work with html and css, text inside an element is laid out inside the element's content box. it starts at the top left of the content...
...eady experienced in your work with html and css, text inside an element is laid out inside the element's content box. it starts at the top left of the content area (or the top right, in the case of rtl language content), and flows towards the end of the line. once it reaches the end, it goes down to the next line and continues, then the next line, until all the content has been placed in the box. text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element. note: if the above paragraph leaves you feeling confused, then no matter — go back and review our box model article, to brush up on the box model theor...
...nts, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element. note: if the above paragraph leaves you feeling confused, then no matter — go back and review our box model article, to brush up on the box model theory, before carrying on. ...
...And 53 more matches

Migrating from webkitAudioContext - Web APIs
ecification of the api. as the specification evolved and changes were made to the spec, some of the old implementation pieces were not removed from the webkit (and blink) implementations due to backwards compatibility reasons. new engines implementing the web audio spec (such as gecko) will only implement the official, final version of the specification, which means that code using webkitaudiocontext or old naming conventions in the web audio specification may not immediately work out of the box in a compliant web audio implementation. this article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different browser engines. note: there is a library cal...
...ventions in the web audio specification may not immediately work out of the box in a compliant web audio implementation. this article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different browser engines. note: there is a library called webkitaudiocontext monkeypatch, which automatically fixes some of these changes to make most code targetting webkitaudiocontext to work on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on...
...hich automatically fixes some of these changes to make most code targetting webkitaudiocontext to work on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on webkitaudiocontext have been renamed in audiocontext. creategainnode() has been renamed to creategain. createdelaynode() has been renamed to createdelay. createjavascriptnode() has been renamed to createscriptprocessor. these are simple renames that were made in order to improve the consistency of these method names on audiocontext. if your code uses either of these names, like in the example below : // ol...
...And 49 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
tory. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. <input> types how an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. if this attribute is not specified, the default type adopted is text. the available types are as follows: type description basic examples spec button a push button with no default behavior displaying the value of the value attribute, empty by default. <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input type="checkbo...
... browsers. <input type="date" name="date"/> html5 datetime-local a control for entering a date and time, with no time zone. opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. <input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email address. ...
...there is an example in the next column, but it's hidden! image a graphical submit button. displays an image defined by the src attribute. the alt attribute displays if the image src is missing. ...
...And 49 more matches

IAccessibleText
when a method doesn't implement this method it must return s_false. typically this feature would not be implemented by an application. however, if the application developer was not satisfied with how screen readers have handled the reading of sentences this boundary type could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's. ...
.... typically this feature would not be implemented by an application. however, if the application developer was not satisfied with how screen readers have handled the reading of sentences this boundary type could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's. the rest of the boundary types must be supported. ...
...ture would not be implemented by an application. however, if the application developer was not satisfied with how screen readers have handled the reading of sentences this boundary type could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's. the rest of the boundary types must be supported. ...
...And 40 more matches

CanvasRenderingContext2D - Web APIs
the canvasrenderingcontext2d interface, part of the canvas api, provides the 2d rendering context for the drawing surface of a <canvas> element. it is used for drawing shapes, text, images, and other objects. see the interface's properties and methods in the sidebar and below. the canvas tutorial has more explanation, examples, and resources, as well. basic example to get a canvasrenderingcontext2d instance, you must first have an html <canvas> element to work with: <canvas id="my-house" width="300" height="300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.getelementbyid('my-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like. this...
...width ctx.linewidth = 10; // wall ctx.strokerect(75, 140, 150, 110); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. ...
...250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. canvasrenderingcontext2d.clearrect() sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content. canvasrenderingcontext2d.fillrect() draws a filled rectangle at (x, y) position whose size is determined by width and height. canvasrenderingcontext2d.strokerect() paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. drawing text the following methods draw text. see also the textmetrics object for text properties. canvasrende...
...And 39 more matches

WebGLRenderingContext - Web APIs
the webglrenderingcontext interface provides an interface to the opengl es 2.0 graphics rendering context for the drawing surface of an html <canvas> element. to get an access to a webgl context for 2d and/or 3d graphics rendering, call getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it. the webgl tutorial has more information, examples, and resources on how to get started with webgl. if you require a webgl 2.0 context, see webgl2renderingcontext; this supplies access to an implementation of opengl es 3.0 graphics. constants see the webgl constants page. ...
...nvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it. the webgl tutorial has more information, examples, and resources on how to get started with webgl. if you require a webgl 2.0 context, see webgl2renderingcontext; this supplies access to an implementation of opengl es 3.0 graphics. constants see the webgl constants page. the webgl context the following properties and methods provide general information and functionality to deal with the webgl context: webglrenderingcontext.canvas a read-only back-reference to the htmlcanvaselement. might be null if it is not associated with a <canvas> element. ...
...access to an implementation of opengl es 3.0 graphics. constants see the webgl constants page. the webgl context the following properties and methods provide general information and functionality to deal with the webgl context: webglrenderingcontext.canvas a read-only back-reference to the htmlcanvaselement. might be null if it is not associated with a <canvas> element. webglrenderingcontext.commit() pushes frames back to the original htmlcanvaselement, if the context is not directly fixed to a specific canvas. webglrenderingcontext.drawingbufferwidth the read-only width of the current drawing buffer. should match the width of the canvas element associated with this context. webglrenderingcontext.drawingbufferheight the read-only height of the current drawing buffer. shoul...
...And 39 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...And 37 more matches

Using textures in WebGL - Web APIs
« previousnext » now that our sample program has a rotating 3d cube, let's map a texture onto it instead of having its faces be solid colors. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. loading textures the first thing to do is add code to load the textures. in our case, we'll be using a single texture, mapped onto all six sides of our rotating cube, but the same technique can be used for any number of textures. ...
...clude it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. loading textures the first thing to do is add code to load the textures. in our case, we'll be using a single texture, mapped onto all six sides of our rotating cube, but the same technique can be used for any number of textures. note: it's important to note that the loading of textures follows cross-domain rules; that is, you can only load textures from sites for which your content has cors approval. see cross-domain textures below for details. the code that loads the texture looks like this: // // initialize a texture and load an image. ...
...d for any number of textures. note: it's important to note that the loading of textures follows cross-domain rules; that is, you can only load textures from sites for which your content has cors approval. see cross-domain textures below for details. the code that loads the texture looks like this: // // initialize a texture and load an image. // when the image finished loading copy it into the texture. // function loadtexture(gl, url) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because images have to be download over the internet // they might take a moment until they are ready. // until then put a single pixel in the texture so we can // use it immediately. ...
...And 37 more matches

Advanced text formatting - Learn web development
previous overview: introduction to html next there are many other elements in html for formatting text, which we didn't get to in the html text fundamentals article. the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. prerequisites: basic html familiarity, as covered in getting started with html. html text formatting, as covered in html text fundamentals. ...
...the purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. ...
...you could try using your own terms and descriptions if you like. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable...
...And 36 more matches

textbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an input field where the user can enter text. it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...eference home [ examples | attributes | properties | methods | related ] an input field where the user can enter text. it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...butes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" v...
...And 33 more matches

HTMLTextAreaElement - Web APIs
the htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" ...
...And 33 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is created by setting the type attribute of the textbox to autocomplete. it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type. toolkit applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltipte...
...y. ...
...tes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popup...
...And 31 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. ...
... a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. ...
... a webvtt file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below: webvtt 00:01.000 --> 00:04.000 - never drink liquid nitrogen. 00:05.000 --> 00:09.000 - it will perforate your stomach. - you could die. ...
...And 30 more matches

nsITextInputProcessor
nsidomwindowutils has provided the methods which dispatched keyboard events and composition events almost directly. ...
...sn't dispatch some events if they are not necessary. this means that even when gecko changes the dom event behavior, it may not be necessary that the users of this interface need to be updated, i.e., the implementation of this class can be a cushion from the impact of gecko's change. ...
... gecko changes the dom event behavior, it may not be necessary that the users of this interface need to be updated, i.e., the implementation of this class can be a cushion from the impact of gecko's change. you can create an instance of this interface with the following code: var tip = components.classes["@mozilla.org/text-input-processor;1"]. ...
...And 28 more matches

WebGL2RenderingContext - Web APIs
you will find this info noted on the webgl 1 reference pages. the webgl tutorial has more information, examples, and resources on how to get started with webgl. ...
...you will find this info noted on the webgl 1 reference pages. the webgl tutorial has more information, examples, and resources on how to get started with webgl. ...
...you will find this info noted on the webgl 1 reference pages. the webgl tutorial has more information, examples, and resources on how to get started with webgl. ...
...And 28 more matches

gettext
warning: this document pertains to the development of mozilla web sites and not to the development of gecko-based extensions or applications. plurals gettext lets you define and use singular and plural forms of a string. to take advantage of this functionality, you need to use a different keyword (i.e. different gettext function name) for string which are supposed to support plurals. for instance, in php the default keyword for regular messages is gettext() and _(). for messages with plural support, the default keyword is ngettext(). a definition of a string with plurals takes three arguments: the singular form of the english string, the plural form of the english string, and the number basing on which the function will return the correct (singular or plural) form of the stri...
...nd _(). for messages with plural support, the default keyword is ngettext(). a definition of a string with plurals takes three arguments: the singular form of the english string, the plural form of the english string, and the number basing on which the function will return the correct (singular or plural) form of the string. consider the following code snippet: <?php $num = 1; printf(ngettext("%d user likes this.", "%d users like this.", $num), $num); ?> depending on the value of the $num variable, this code will either use the singular ("user likes) or the plural ("users like") form of the string. notice that you need to pass the $num variable twice. first in the ngettext() call, where it will be used to determine which form of the string will be returned. in the above example, $num...
... will be used to determine which form of the string will be returned. in the above example, $num equals 1, so the string returned (for english) will be %d user likes this. the second time the $num variable is passed in the printf() call, which at this point of interpretation looks something like printf("%d user likes this.", $num);. the %d in the first argument (which is the string returned by gettext) will be replaced with the value of $num. for english, the above code will produce the following output: 1 user likes this. the string definition in the messages.po file will look like this: #: file.php:3 #, php-format msgid "%d user likes this." msgid_plural "%d users like this." msgstr[0] "" msgstr[1] "" depending on the localizer's target language and its rules for creating plural forms, ther...
...And 27 more matches

HTML elements reference - HTML: Hypertext Markup Language
of a page whose purpose is to provide navigation links, either within the current document or to other documents. common examples of navigation sections are menus, tables of contents, and indexes. <section> the html <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an html document. text content use html text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. important for accessibility and seo, these elements identify the purpose or structure of that content. element description <blockquote> the html <blockquote> element (or html block quotation element) indicates that the e...
... use html text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. important for accessibility and seo, these elements identify the purpose or structure of that content. element description <blockquote> the html <blockquote> element (or html block quotation element) indicates that the enclosed text is an extended quotation. usually, this is rendered visually by indentation (see notes for how to change it). a url for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element. <dd> the html <dd> element provides the description, definition, or value for the preceding term (<dt>) in a descript...
...area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. <ol> the html <ol> element represents an ordered list of items — typically rendered as a numbered list. <p> the html <p> element represents a paragraph. <pre> the html <pre> element represents preformatted text which is to be presented exactly as written in the html file. <ul> the html <ul> element represents an unordered list of items, typically rendered as a bulleted list. inline text semantics use the html inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text. element description <a> the h...
...And 27 more matches

TextEncoder.prototype.encodeInto() - Web APIs
the textencoder.prototype.encodeinto() method takes a usvstring to encode and a destination uint8array to put resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding. this is potentially more performant than the older encode() method especially when the target buffer is a view into a wasm heap. syntax b1 = encoder.encodeinto(string, uint8array); parameters string is a usvstring containing the text to encode. uint8array is a uint8array object instance to place the resulting utf-8 encoded text into. return value a textencoderencodeintoresult dictionary, which contains two members: read the number of utf-16 units of code from the source that has been converted over to utf-8. this may be less than string.length if uint8array di...
...itten the number of bytes modified in the destination uint8array. the bytes written are guaranteed to form complete utf-8 byte sequences. encode into a specific position encoder.encodeinto always puts its output at the start of the array. however, it is sometimes useful to make the output start at a particular index. the solution is typedarray.prototype.subarray(). observe. ...
...f the output allocation (typically within wasm heap) is expected to be short-lived, it makes sense to simply allocate s.length * 3 bytes for the output, in which case the first conversion attempt is guaranteed to convert the whole string. note that the s.length * 3 is rare because the string would have to be packed with some of the few characters that expant into 3 bytes. it is unlikely that long text will exceed s.length * 2 bytes in length. thus, a more optimistic approach might be to allocate s.length * 2 + 5 bytes, and perform reallocation in the rare circumstance that the optimistic prediction was wrong. if the output is expected to be long-lived, it makes sense to compute minimum allocation rounduptobucketsize(s.length), the maximum allocation size s.length * 3, and to have a chosen (a...
...And 26 more matches

WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
compressed image formats must be enabled by webgl extensions before using these methods. ...
... compressed image formats must be enabled by webgl extensions before using these methods. ...
... gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, glsizei imagesize, glintptr offset); void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture. possible values for compressedteximage2d: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture.
...And 23 more matches

text-transform - CSS: Cascading Style Sheets
the text-transform css property specifies how to capitalize an element's text. it can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. it also can help improve legibility for ruby. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text-transform property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß be...
......
...uppercase. in greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ). in greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. when applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context. in irish (ga), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example text-transform: uppercase will change ar aon tslí to ar aon tslÍ and not, as one might expect, ar aon tslÍ (firefox only). in some cases, a hyphen is also remov...
...And 21 more matches

What text editors are available? - Learn web development
ideally, you'd try as many editors as you can and get a feel for what suits your workflow. ...
...ideally, you'd try as many editors as you can and get a feel for what suits your workflow. ...
...ideally, you'd try as many editors as you can and get a feel for what suits your workflow. ...
...And 20 more matches

IAccessibleEditableText
the substrings used with this interface are specified as follows: if startoffset is less than endoffset, the substring starts with the character at startoffset and ends with the character just before endoffset. ...
...the substrings used with this interface are specified as follows: if startoffset is less than endoffset, the substring starts with the character at startoffset and ends with the character just before endoffset. ...
...the substrings used with this interface are specified as follows: if startoffset is less than endoffset, the substring starts with the character at startoffset and ends with the character just before endoffset. ...
...And 20 more matches

WEBGL_compressed_texture_s3tc - Web APIs
ext.compressed_rgb_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format. ...
... ext.compressed_rgb_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format. ...
... ext.compressed_rgb_s3tc_dxt1_ext a dxt1-compressed image in an rgb image format. ...
...And 20 more matches

ContextMenus - Archive of obsolete content
context menus a context menu is a menu where the items on the menu are specific to the context in which the menu was opened. a typical usage is for the user to right-click on an element to display a menu of commands pertaining to what was clicked on. context menu events there are various ways in which a context menu can be opened. the most common is by clicking on an element with the right mouse button. on macintosh systems with only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control key and clicking the mouse button. on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a ...
...th only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control key and clicking the mouse button. on windows, the context menu can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a user has used the mouse to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="center" onc...
...enu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute. as textboxes have a context menu built in, the event will fire before an attempt to open the context menu. however, the event will also fire when the label is right-clicked for inst...
...And 19 more matches

Animating textures in WebGL - Web APIs
« previous in this demonstration, we build upon the previous example by replacing our static textures with the frames of an mp4 video file that's playing. this is actually pretty easy to do and fun to watch, so let's get started. you can use similar code to use any sort of data (such as a <canvas>) as the source for your textures. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. ...
...ur textures. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. ...
...ment. we set it to autoplay, mute the sound, and loop the video. we then set up two events to make sure the video is playing and the time has been updated. we need both of these checks because it will produce an error if you upload a video to webgl that has no data available yet. checking for both of these events guarantees there is data available and it's safe to start uploading video to a webgl texture. in the code above, we confirm whether we got both of those events; if so, we set a global variable, copyvideo, to true to indicate that it's safe to start copying the video to a texture. and finally, we set the src attribute to start and call play to start loading and playing the video. the video must be loaded from a secure source in order to be used to provide texture data to webgl. that ...
...And 19 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
ick a color. then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. things that can have color at the element level, everything in html can have color applied to it. ...
...in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. for each, we'll see a list of the css properties that apply color to them. at a fundamental level, the color property defines the foreground color of an html element's content and the background-color property defines the element's background color. these can be used on just about any element. text whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text. color the color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth. ...
...ment's background color. these can be used on just about any element. text whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text. color the color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth. background-color the text's background color. text-shadow configures a shadow effect to apply to text. among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). see text drop shadows in fundamental text and font styling to learn more. ...
...And 19 more matches

Add a Context Menu Item - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to add items and submenus to the firefox context menu, use the context-menu module. here's an add-on that adds a new context menu item. the item is displayed whenever something in the page is selected. ...
... to follow this tutorial you'll need to have learned the basics of jpm. to add items and submenus to the firefox context menu, use the context-menu module. here's an add-on that adds a new context menu item. the item is displayed whenever something in the page is selected. ...
... to follow this tutorial you'll need to have learned the basics of jpm. to add items and submenus to the firefox context menu, use the context-menu module. here's an add-on that adds a new context menu item. the item is displayed whenever something in the page is selected. ...
...And 18 more matches

nsIAccessibleText
accessible/public/nsiaccessibletext.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coo...
... long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coordtype); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring gettext(in long startoffset, in long endoffset); astring gettextafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astring gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rang...
...ttextafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astring gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); void removeselection(in long selectionnum); void scrollsubstringto(in long startindex, in long endindex, in unsigned long scrolltype); void scrollsubstringtopoint(in long startindex, in long endindex, in unsigned long coordinatetype, in long x, in long y); void setselectionbo...
...And 18 more matches

BaseAudioContext - Web APIs
the baseaudiocontext interface of the web audio api acts as a base definition for online and offline audio-processing graphs, as represented by audiocontext and offlineaudiocontext respectively. you wouldn't use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces. a baseaudiocontext can be a target of events, therefore it implements the eventtarget interface. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" hei...
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160...
... mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage aud...
...And 18 more matches

text-decoration - CSS: Cascading Style Sheets
the text-decoration shorthand css property sets the appearance of decorative lines on text. it is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. text decorations are drawn across descendant text elements. this means that if an element specifies a text decoration, then a child element can't remove the decoration. ...
...ve example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. text decorations are drawn across descendant text elements. this means that if an element specifies a text decoration, then a child element can't remove the decoration. for example, in the markup <p>this text has <em>some emphasized words</em> in it.</p>, the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. the style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. however, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words". constitu...
...: underline; } would cause the entire paragraph to be underlined. the style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. however, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words". constituent properties this property is a shorthand for the following css properties: text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness syntax the text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties. ...
...And 18 more matches

SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering child text content. it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" ...
...And 16 more matches

TextMetrics - Web APIs
the textmetrics interface represents the dimensions of a piece of text in the canvas; a textmetrics() instance can be retrieved using the canvasrenderingcontext2d.measuretext() method. properties textmetrics.width read only is a double giving the calculated width of a segment of inline text in css pixels. it takes into account the current font of the context. textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. ...
...lated width of a segment of inline text in css pixels. it takes into account the current font of the context. textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. ...
...the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. textmetrics.fontboundingboxascent read only is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in css pixels. ...
...And 16 more matches

ARIA: textbox role - Accessibility
the textbox role is used to identify an element that allows the input of free-form text. whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input. description when an element has the textbox role, the browser sends an accessible textbox event to assistive technologies, which can then notify the user about it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
... which can then notify the user about it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
...turn or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
...And 16 more matches

text-align - CSS: Cascading Style Sheets
the text-align css property sets the horizontal alignment of a block element or table-cell box. this means it works like vertical-align but in the horizontal direction. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...y sets the horizontal alignment of a block element or table-cell box. this means it works like vertical-align but in the horizontal direction. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...tal alignment of a block element or table-cell box. this means it works like vertical-align but in the horizontal direction. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 16 more matches

HTML attribute reference - HTML: Hypertext Markup Language
e uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser. ...
... autoplay <audio>, <video> the audio or video should play as soon as possible. ...
...with css to style elements with common properties. code <applet> specifies the url of the applet's class file to be loaded and executed. codebase <applet> this attribute gives the absolute or relative url of the directory where applets' .class files referenced by the code attribute are stored. color <basefont>, <font>, <hr> this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. note: this is a legacy attribute. please use the css color property instead. cols <textarea> defines the number of columns in a textarea. colspan <td>, <th> the colspan attribute defines the number of columns a cell should span. content <meta> a ...
...And 16 more matches

<input type="email"> - HTML: Hypertext Markup Language
nsure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. on browsers that don't support inputs of type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contain...
... value. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the email input. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the email input has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. minlength the minimum number of characters (as utf-16 code units) the user can enter into the email input. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invali...
... changed by the user. minlength the minimum number of characters (as utf-16 code units) the user can enter into the email input. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid value is specified, the email input has no minimum length. the input will fail constraint validation if the length of the text entered into the field is fewer than minlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. multiple a boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. see allowing multiple e-mail addresses for an example, or html attrib...
...And 16 more matches

TextRange - Web APIs
ie only this property is ie specific. although it is well supported by ie, most other browsers no longer support this property. this property should only be used as one of the solutions when you need to be compatible with lower versions of ie, rather than relying on it completely in cross browser scripts. a textrange object represents a fragment of text in a document, similar to the standard defined range interface. this object is used to represent a specific piece of text in the document. for example, when you hold down the mouse to select the content on the page, you create a typical textrange. it is implemented in ie, then a textrange object can be created by element.createtextrange() or document.selection.createrange(). note that this interface is not supported in non ie bro...
...e of text in the document. for example, when you hold down the mouse to select the content on the page, you create a typical textrange. it is implemented in ie, then a textrange object can be created by element.createtextrange() or document.selection.createrange(). note that this interface is not supported in non ie browsers. alternative selection and range interfaces can be used. properties textrange.boundingheightread only returns the height of the rectangle bound to the textrange object. textrange.boundingleftread only returns the distance between the left edge of the rectangle that binds the textrange object and the left edge that completely contains the textrange object. ...
...upported in non ie browsers. alternative selection and range interfaces can be used. properties textrange.boundingheightread only returns the height of the rectangle bound to the textrange object. textrange.boundingleftread only returns the distance between the left edge of the rectangle that binds the textrange object and the left edge that completely contains the textrange object. textrange.boundingtopread only returns the distance between the top edge of the rectangle that binds the textrange object and the top edge that completely contains the textrange object. textrange.boundingwidthread only returns the width of the rectangle bound to the textrange object. ...
...And 14 more matches

Compressed texture formats - Web APIs
the webgl api provides methods to use compressed texture formats. these are useful to increase texture detail while limiting the additional video memory necessary. by default, no compressed formats are available: a corresponding compressed texture format extension must first be enabled. usage unless otherwise specified, this article applies to both webgl 1 and 2 contexts. if supported, textures can be stored in a compressed format in video memory. this allows for additional detail while limiting the added video memory necessary. textures are uncompressed on the fly when being accessed by a shader. note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png ...
...compressed format in video memory. this allows for additional detail while limiting the added video memory necessary. textures are uncompressed on the fly when being accessed by a shader. note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg. as compressed textures require hardware support, therefore no specific formats are required by webgl; instead, a context can make different formats available, depending on hardware support. this site shows which formats are supported in the used browser. usage of compressed formats first requires activating the respective extension with webglrenderingcontext.getextension(). if supported, it will return an extensio...
...ats available, depending on hardware support. this site shows which formats are supported in the used browser. usage of compressed formats first requires activating the respective extension with webglrenderingcontext.getextension(). if supported, it will return an extension object with constants for the added formats and the formats will also be returned by calls to gl.getparameter(gl.compressed_texture_formats). (e.g. ext.compressed_rgba_s3tc_dxt1_ext for the webgl_compressed_texture_s3tc extension.) these can then be used with compressedteximage[23]d or compressedtexsubimage[23]d instead of teximage2d calls. note that webgl makes no functionality available to compress or decompress textures: they must already be in a compressed format and can then be directly uploaded to video memory. all...
...And 14 more matches

Text labels and names - Accessibility
there are many situations in which a control, dialog, or other website feature should be given a descriptive name or label to allow users of assistive technologies to understand what its purpose is and to be able to understand and operate it correctly. there are a number of different types of problems in this category, found in different contexts, and each has its own solution. ...
...as its own solution. the different problems and solutions are discussed in the sections below. use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to. failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image. examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="referen...
...alt="areas in the library. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example. see also <area> h24: providing text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as a dialog box (for example, a modal dialog asking the user to make a choice or respond to an action being taken), give it a descriptive label or name, so that assistive technology users can easily discover what its purpose is. a dialog box is generally denoted by an aria role="dia...
...And 14 more matches

<input type="url"> - HTML: Hypertext Markup Language
the input value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange(). value the <in...
...rent value. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the url input. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the url input has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. minlength the minimum number of characters (as utf-16 code units) the user can enter into the url input. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid ...
...e is changed by the user. minlength the minimum number of characters (as utf-16 code units) the user can enter into the url input. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid value is specified, the url input has no minimum length. the input will fail constraint validation if the length of the text entered into the field is fewer than minlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. pattern the pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation. it must be a valid javascript regular expression, as used by the regexp type, and as docum...
...And 14 more matches

EXT_texture_compression_bptc - Web APIs
ext.compressed_rgba_bptc_unorm_ext compresses 8-bit fixed-point data. ...
... ext.compressed_rgba_bptc_unorm_ext compresses 8-bit fixed-point data. ...
... ext.compressed_rgba_bptc_unorm_ext compresses 8-bit fixed-point data. ...
...And 13 more matches

OfflineAudioContext - Web APIs
the offlineaudiocontext interface is an audiocontext interface representing an audio-processing graph built from linked together audionodes. in contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an audiobuffer. ...
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" he...
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width...
...And 13 more matches

WEBGL_compressed_texture_astc - Web APIs
methods this extension exposes one new methods. ext.getsupportedprofiles() returns an array of strings containing the names of the astc profiles supported by the implementation. ...
... methods this extension exposes one new methods. ext.getsupportedprofiles() returns an array of strings containing the names of the astc profiles supported by the implementation. ...
... methods this extension exposes one new methods. ext.getsupportedprofiles() returns an array of strings containing the names of the astc profiles supported by the implementation. ...
...And 13 more matches

WebGLRenderingContext.getParameter() - Web APIs
the webglrenderingcontext.getparameter() method of the webgl api returns a value for the passed parameter name. syntax any gl.getparameter(pname); parameters pname a glenum specifying which parameter value to return. see below for possible values. return value depends on the parameter. parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext. ...
... for the passed parameter name. syntax any gl.getparameter(pname); parameters pname a glenum specifying which parameter value to return. see below for possible values. return value depends on the parameter. parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext. ...
...l.blend_equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.color_clear_value float32array (with 4 values) gl.color_writemask sequence<glboolean> (with 4 values) gl.compressed_texture_formats uint32array returns the compressed texture formats. when using the webgl_compressed_texture_s3tc extension: ext.compressed_rgb_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt3_ext ext.compressed_rgba_s3tc_dxt5_ext when using the webgl_compressed_texture_s3tc_srgb extension: ext.compressed_srgb_s3t...
...And 13 more matches

:host-context() - CSS: Cascading Style Sheets
in other words, this allows a custom element, or anything within that custom element's shadow dom, to apply different styles based on its position within the outer dom or classes/attributes applied to ancestor elements. one typical use of this is with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>. ...
...on its position within the outer dom or classes/attributes applied to ancestor elements. one typical use of this is with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>. ...
...t that are inside an <h1>. another typical use would be to allow inner elements to react to classes or attributes on any anscestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>. note: this has no effect when used outside a shadow dom. ...
...And 13 more matches

text-size-adjust - CSS: Cascading Style Sheets
instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. ...
...instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. ...
...instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. ...
...And 13 more matches

Rich-Text Editing in Mozilla - Developer guides
note: this document is out-of-date; you are advised to consult the more up-to-date document available at making content editable. mozilla 1.3 introduces an implementation of microsoft® internet explorer's designmode feature. the rich-text editing support in mozilla 1.3 supports the designmode feature which turns html documents into rich-text editors. starting in firefox 3, mozilla also supports internet explorer's contenteditable attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment). setting up rich-text editing rich-text editing is initialized by setting the designmode property of a document to "on", such as the document inside an iframe. once designmode has been set to "on", the...
...the most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website. ...
...the most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website. similarly, setting contenteditable to "true" allows you to make individual elements of a document editable. ...
...And 13 more matches

textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. the user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). ...
...thod or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). ...
...methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). ...
...And 13 more matches

JS_PreventExtensions
obj js::handleobject object to be made non-extensible. result js::objectopresult &amp; (out parameter) receives the result of the operation. ...
... obj js::handleobject object to be made non-extensible. result js::objectopresult &amp; (out parameter) receives the result of the operation. ...
... obj js::handleobject object to be made non-extensible. result js::objectopresult &amp; (out parameter) receives the result of the operation. ...
...And 12 more matches

WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. syntax // webgl1: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview? pixels); void gl.teximage2d(target, level, internalformat, format, type, imagedata? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlimageelement? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlcanvaselement? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlvideoelement? pixels); void gl.teximage2d(target, level, internalformat, format, type, imagebitmap? pixels); // webgl2: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, glintptr offset); voi...
...et, level, internalformat, width, height, border, format, type, imagebitmap source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, imagedata source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_po...
...wo-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_positive_z: positive z face for a cube-mapped texture. gl.texture_cube_map_negative_z: negative z face for a cube-mapped texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. internalformat a glenum specifying the color components in the texture. possible values in both webgl1 and webgl2 format type channels bytes per pixel ...
...And 12 more matches

text-decoration-thickness - CSS: Cascading Style Sheets
from-font if the font file includes information about a preferred thickness, use that value. ...
... from-font if the font file includes information about a preferred thickness, use that value. ...
... from-font if the font file includes information about a preferred thickness, use that value. ...
...And 12 more matches

<input type="image"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. methods none. ...
...t be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent tha...
...lt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device). if provided, it must be a non-empty string appropriate as a label for the button. for example, if you have a graphical button that shows an image with an icon and/or image text "login now", you should also set the alt attribute to something like login now. important: while the alt attribute is technically optional, you should always include one to maximize the usability of your content. functionally, the <input type="image"> alt attribute works just like the alt attribute on <img> elements. formaction a string indicating the url to which to submit the data. this t...
...And 12 more matches

Texts - SVG: Scalable Vector Graphics
« previousnext » when talking about text in svg we have to differentiate two almost completely separate topics. the one is the inclusion and display of text in an image, and the other are svg fonts. the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an svg image. basics we have seen in the introducing example, that the text element can be used to put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear. the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point. the attribute dominant-baseline decides the ...
... arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear. the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point. the attribute dominant-baseline decides the vertical alignment. like with the shape elements text can be colorized with the fill attribute and given a stroke with the stroke attribute. both may also refer to gradients or patterns, which makes simple coloring text in svg very powerful compared to css 2.1. setting font properties an essential part of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable font selection. e...
... properties an essential part of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable font selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration. other text-related elements tspan this element is used to mark up sub-portions of a larger text. it must be a child of a text element or another tspan element. a typical usecase is to paint one word of a sentence bold red. ...
...And 12 more matches

Understanding WebAssembly text format - WebAssembly
to enable webassembly to be read and edited by humans, there is a textual representation of the wasm binary format. this is an intermediate form designed to be exposed in text editors, browser developer tools, etc. this article explains how that text format works, in terms of the raw syntax, and how it is related to the underlying bytecode it represents — and the wrapper objects representing wasm in javascript. note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler. s-expressions in both the binary and ...
...n javascript. note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler. s-expressions in both the binary and textual formats, the fundamental unit of code in webassembly is a module. in the text format, a module is represented as one big s-expression. s-expressions are a very old and very simple textual format for representing trees, and thus we can think of a module as a tree of nodes that describe the module’s structure and its code. unlike the abstract syntax tree of a programming language, though, w...
...esents a tree with the root node “module” and two child nodes, a "memory" node with the attribute "1" and a "func" node. we’ll see shortly what these nodes actually mean. the simplest module let's start with the simplest, shortest possible wasm module. (module) this module is totally empty, but is still a valid module. if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some executable code to this module. all code in a webassembly module is grouped into functions, which have the fol...
...And 12 more matches

HTMLElement.innerText - Web APIs
the innertext property of the htmlelement interface represents the "rendered" text content of a node and its descendants. as a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard. note: innertext is easily confused with node.textcontent, but there are important differences between the two. basically, innertext is aware of the rendered appearance of text, while textcontent is not. syntax const renderedtext = htmlelement.innertext htmlelement.innertext = string value a domstring representing the rendered text content of an element. ...
... two. basically, innertext is aware of the rendered appearance of text, while textcontent is not. syntax const renderedtext = htmlelement.innertext htmlelement.innertext = string value a domstring representing the rendered text content of an element. if the element itself is not being rendered (e.g detached from the document or is hidden from view), the returned value is the same as the node.textcontent property. example this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...
...f the element itself is not being rendered (e.g detached from the document or is hidden from view), the returned value is the same as the node.textcontent property. example this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...
...And 11 more matches

text-decoration-color - CSS: Cascading Style Sheets
the text-decoration-color css property sets the color of decorations added to text by text-decoration-line. the color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. css does not provide a direct mechanism for specifying a unique color for each line type. ...
...ample is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. css does not provide a direct mechanism for specifying a unique color for each line type. ...
...to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. css does not provide a direct mechanism for specifying a unique color for each line type. this effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the text-decoration-line property), and specifying the line color (with text-decoration-color) on a per-element basis. ...
...And 11 more matches

text-decoration-style - CSS: Cascading Style Sheets
as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. ...
...as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. ...
... style applies to all lines that are set with text-decoration-line. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an html tag, like <del> or <s>. as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
...And 11 more matches

text-emphasis-color - CSS: Cascading Style Sheets
if no color is present, it defaults to currentcolor. ...
...if no color is present, it defaults to currentcolor. ...
...if no color is present, it defaults to currentcolor. ...
...And 11 more matches

<tbody>: The Table Body element - HTML: Hypertext Markup Language
ributes this element includes the global attributes. deprecated attributes align this enumerated attribute specifies how horizontal alignment of each cell content will be handled. ...
...ign this enumerated attribute specifies how horizontal alignment of each cell content will be handled. ...
... bgcolor the background color of the table. ...
...And 11 more matches

JS_SetContextCallback
specifies a callback function that is automatically called whenever a jscontext is created or destroyed. syntax void js_setcontextcallback(jsruntime *rt, jscontextcallback cxcallback, void *data); name type description rt jsruntime * pointer to a js runtime. cxcallback jscontextcallback pointer to the callback function, described below. data void * any data passed as 3rd argument to the callback function. ...
...(jsruntime *rt, jscontextcallback cxcallback, void *data); name type description rt jsruntime * pointer to a js runtime. cxcallback jscontextcallback pointer to the callback function, described below. data void * any data passed as 3rd argument to the callback function. added in spidermonkey 31 callback syntax typedef bool (* jscontextcallback)(jscontext *cx, unsigned contextop, void *data); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions. this is the context which was just created, or is about to be destroyed. ...
...tion. added in spidermonkey 31 callback syntax typedef bool (* jscontextcallback)(jscontext *cx, unsigned contextop, void *data); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions. this is the context which was just created, or is about to be destroyed. for example, the callback my call js_getcontextprivate(cx) in order to free up resources previously allocated by js_setcontextprivate. contextop unsigned see jscontextop. for future compatibility the callback must do nothing and return true if any other value is passed. data void * data specified in js_setcontextcallback. ...
...And 10 more matches

SVGTextPathElement - Web APIs
the svgtextpathelement interface corresponds to the <textpath> element. ...
...ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" ...
...And 10 more matches

text-overflow - CSS: Cascading Style Sheets
the text-overflow css property sets how hidden overflow content is signaled to users. it can be clipped, display an ellipsis ('…'), or display a custom string. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text-overflow property doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. for example: overflow: hidden; white-space: nowrap; the text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). synta...
...operty doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. for example: overflow: hidden; white-space: nowrap; the text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). syntax the text-overflow property may be specified using one or two values. if one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). if two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line. each value is specified as one ...
... specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line. each value is specified as one of: one of the keyword values: clip, ellipsis, fade the function fade(), which is passed a <length> or a <percentage> to control the fade distance a <string>. values clip the default for this property. this keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. to clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: '';. ellipsis this keyword value will display an ellipsis ('…', u+2026 horizontal ellipsis) to represent clipped text. the ellipsis is disp...
...And 10 more matches

<input type="search"> - HTML: Hypertext Markup Language
<input> elements of type search are text fields designed for the user to enter search queries into. these are functionally identical to text inputs, but may be styled differently by the user agent. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the value contained in the search field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size. idl attributes value methods select(), setrangetext(), setselectionrange(). value the value attribute co...
... methods select(), setrangetext(), setselectionrange(). value the value attribute contains a domstring representing the value contained in the search field. you can retrieve this using the htmlinputelement.value property in javascript. searchterms = mysearch.value; if no validation constraints are in place for the input (see validation for more details), the value can be any text string or an empty string (""). additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, search field inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of cha...
...alue. maxlength the maximum number of characters (as utf-16 code units) the user can enter into the search field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the search field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-16 code units long. minlength the minimum number of characters (as utf-16 code units) the user can enter into the search field. this must be a non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid value is specified, the search input has no minimum length. the search...
...And 10 more matches

<menu> - HTML: Hypertext Markup Language
the html <menu> element represents a group of commands that a user can perform or activate. this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked. content categories flow content. if the element's children include at least one <li> element: palpable content. permitted content if the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li>, <script>, and <template>. ...
...s been clicked. content categories flow content. if the element's children include at least one <li> element: palpable content. permitted content if the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li>, <script>, and <template>. (list menu is the default state, unless the parent element is a <menu> in the context menu state.) if the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem>, <hr>, <script>, and <template>. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role list permitted aria rol...
... listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement attributes this element includes the global attributes. label the name of the menu as shown to the user. used within nested menus, to provide a label through which the submenu can be accessed. must only be specified when the parent element is a <menu> in the context menu state. type this attribute indicates the kind of menu being declared, and can be one of two values. context : indicates the popup menu state, which represents a group of commands activated through another element. this might be as a button menu referenced by a menu attribute of a <button> element, or as context menu for an element with a contextmenu attribute. this value is the defau...
...And 10 more matches

text-anchor - SVG: Scalable Vector Graphics
the text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point. it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
...e-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point. it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
...ext where the wrapping area is determined from the inline-size property relative to a given point. it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the x and y attributes on the <text> element, any x or y attribute values on a <tspan>, <tref> or <altglyph> element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a <textpath> element. note: as a p...
...And 10 more matches

Handling different text directions - Learn web development
will introduce them now. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the importance of writing modes to modern css. ...
... the three possible values for the writing-mode property are: horizontal-tb: top-to-bottom block flow direction. sentences run horizontally. vertical-rl: right-to-left block flow direction. sentences run vertically. ...
... or vertically. the writing-mode property lets us switch from one writing mode to another. you don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes. in the example below we have a heading displayed using writing-mode: vertical-rl. the text now runs vertically. vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design. the three possible values for the writing-mode property are: horizontal-tb: top-to-bottom block flow direction. sentences run horizontally. vertical-rl: right-to-left block flow direction. sentences run vertically. vertical-lr: left-to-right block flow direction. sentences run vertica...
...And 9 more matches

nsIAccessibleEditableText
accessible/public/nsiaccessibleeditabletext.idlscriptable an interface for editing text of an accessible object. the operations it supports includes setting text attributes and text contents while also replacing old text of an object with new text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
.... the operations it supports includes setting text attributes and text contents while also replacing old text of an object with new text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
...utes and text contents while also replacing old text of an object with new text. it also includes and support basic operations such as, inserting text, copying text, cutting text, pasting text and deleting text at the specified position. ...
...And 9 more matches

AudioContext - Web APIs
the audiocontext interface represents an audio-processing graph built from audio modules linked together, each represented by an audionode. an audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. you need to create an audiocontext before you do anything else, as everything happens inside a context. it's recommended to create one audiocontext and reuse it instead of initializing a new one each time, and it's ok to use a single audiocontext for several different audio source and pipeline concurrently. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute;...
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" he...
...dale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object. properties also inherits properties from its parent interface, baseaudi...
...And 9 more matches

Drawing text - Web APIs
« previousnext » after having seen how to apply styles and colors in the previous chapter, we will now have a look at how to draw text onto the canvas. drawing text the canvas rendering context provides two methods to render text: filltext(text, x, y [, maxwidth]) fills a given text at the given (x,y) position. optionally with a maximum width to draw. stroketext(text, x, y [, maxwidth]) strokes a given text at the given (x,y) position. optionally with a maximum width to draw. a filltext example the text is filled using the current fillstyle. ...
...t: filltext(text, x, y [, maxwidth]) fills a given text at the given (x,y) position. optionally with a maximum width to draw. stroketext(text, x, y [, maxwidth]) strokes a given text at the given (x,y) position. optionally with a maximum width to draw. a filltext example the text is filled using the current fillstyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle. ...
...filled using the current fillstyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size. ...
...And 9 more matches

EXT_texture_filter_anisotropic - Web APIs
the ext_texture_filter_anisotropic extension is part of the webgl api and exposes two constants for anisotropic filtering (af). af improves the quality of mipmapped texture access when viewing a textured primitive at an oblique angle. using just mipmapping, these lookups have a tendency to average to grey. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. constants ext.max_texture_max_anisotropy_ext this is the pname argument to the gl.getparameter() call, and it returns the maximum available anisotropy. ...
...ebgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. constants ext.max_texture_max_anisotropy_ext this is the pname argument to the gl.getparameter() call, and it returns the maximum available anisotropy. ext.texture_max_anisotropy_ext this is the pname argument to the gl.gettexparameter() and gl.texparameterf() / gl.texparameteri() calls and sets the desired maximum anisotropy for a texture. ...
...oth, webgl1 and webgl2 contexts. constants ext.max_texture_max_anisotropy_ext this is the pname argument to the gl.getparameter() call, and it returns the maximum available anisotropy. ext.texture_max_anisotropy_ext this is the pname argument to the gl.gettexparameter() and gl.texparameterf() / gl.texparameteri() calls and sets the desired maximum anisotropy for a texture. ...
...And 9 more matches

SVGTextElement - Web APIs
the svgtextelement interface corresponds to the <text> elements. ...
...ock; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" ...
...And 9 more matches

WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format. compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used. syntax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview? pixels); // additionally available in webgl 2: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, imagesize, offset); void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (targ...
...ditionally available in webgl 2: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, imagesize, offset); void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active compressed texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_po...
...wo-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_positive_z: positive z face for a cube-mapped texture. gl.texture_cube_map_negative_z: negative z face for a cube-mapped texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the horizontal offset within the compressed texture image. yoffset a glint specifying the vertical offset within the compressed texture image. width a gls...
...And 9 more matches

WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
the webglrenderingcontext.getframebufferattachmentparameter() method of the webgl api returns information about a framebuffer's attachment. syntax any gl.getframebufferattachmentparameter(target, attachment, pname); parameters target a glenum specifying the binding point (target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible ...
...g a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible values: gl.color_attachment0: texture attachment for the framebuffer's color buffer. gl.depth_attachment: texture attachment for the framebuffer's depth buffer. gl.stencil_attachment: texture attachment for the framebuffer's stencil buffer. gl.depth_stencil_attachment: texture attachment for both, the depth and stencil buffer. ...
...nt point for the texture. possible values: gl.color_attachment0: texture attachment for the framebuffer's color buffer. gl.depth_attachment: texture attachment for the framebuffer's depth buffer. gl.stencil_attachment: texture attachment for the framebuffer's stencil buffer. gl.depth_stencil_attachment: texture attachment for both, the depth and stencil buffer. ...
...And 9 more matches

The stacking context - CSS: Cascading Style Sheets
element with a position value absolute or relative and z-index value other than auto. ...
... element with a position value absolute or relative and z-index value other than auto. ...
... element with a position value absolute or relative and z-index value other than auto. ...
...And 9 more matches

CSS Text Decoration - CSS: Cascading Style Sheets
css text decoration is a module of css that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. reference properties letter-spacing text-align text-decoration text-decoration-color text-decoration-line text-decoration-offset text-decoration-skip-ink text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-rendering text-shadow text-transform white-space word-spacing guides none. ...
...s letter-spacing text-align text-decoration text-decoration-color text-decoration-line text-decoration-offset text-decoration-skip-ink text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-rendering text-shadow text-transform white-space word-spacing guides none. ...
...tion text-decoration-color text-decoration-line text-decoration-offset text-decoration-skip-ink text-decoration-style text-decoration-thickness text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-rendering text-shadow text-transform white-space word-spacing guides none. ...
...And 9 more matches

CanvasRenderingContext2D.createPattern() - Web APIs
syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image. ...
... syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image. ...
... syntax canvaspattern ctx.createpattern(image, repetition); parameters image a canvasimagesource to be used as the pattern's image. ...
...And 8 more matches

EXT_texture_compression_rgtc - Web APIs
the ext_texture_compression_rgtc extension is part of the webgl api and exposes 4 rgtc compressed texture formats. rgtc is a block-based texture compression format suited for unsigned and signed red and red-green textures (red-green texture compression). webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: support depends on the system's graphics driver. there is no support on windows. this extension is available to both, webgl1 and webgl2 contexts. constants the compressed texture formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ext.compressed_red_rgtc1_ext each 4x4 block of texels consists o...
...each 4x4 block of texels consists of 64 bits of compressed unsigned red image data followed by 64 bits of compressed unsigned green image data. see also bc5 unsigned. ...
...f texels consists of 64 bits of compressed unsigned red image data followed by 64 bits of compressed unsigned green image data. see also bc5 unsigned. ext.compressed_signed_red_green_rgtc2_ext each 4x4 block of texels consists of 64 bits of compressed signed red image data followed by 64 bits of compressed signed green image data. ...
...And 8 more matches

Element.insertAdjacentText() - Web APIs
return value void. exceptions exception explanation syntaxerror the position specified is not a recognised value. ...
... return value void. exceptions exception explanation syntaxerror the position specified is not a recognised value. ...
...sition, element); parameters position a domstring representing the position relative to the element; must be one of the following strings: 'beforebegin': before the element itself. 'afterbegin': just inside the element, before its first child. 'beforeend': just inside the element, after its last child. 'afterend': after the element itself. element a domstring representing the text to be inserted into the tree. return value void. exceptions exception explanation syntaxerror the position specified is not a recognised value. visualization of position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in a tree and ...
...And 8 more matches

SVGTextPositioningElement - Web APIs
the svgtextpositioningelement interface is implemented by elements that support attributes that position individual text glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" ...
...And 8 more matches

TextDecoder - Web APIs
the textdecoder interface represents a decoder for a specific text encoding, such as utf-8, iso-8859-2, koi8-r, gbk, etc. a decoder takes a stream of bytes as input and emits a stream of code points. examples representing text with typed arrays this example shows how to decode a chinese/japanese character , as represented by five different typed arrays: uint8array, int8array, uint16array, int16array, and int32array. ...
... for a specific text encoding, such as utf-8, iso-8859-2, koi8-r, gbk, etc. a decoder takes a stream of bytes as input and emits a stream of code points. examples representing text with typed arrays this example shows how to decode a chinese/japanese character , as represented by five different typed arrays: uint8array, int8array, uint16array, int16array, and int32array. ...
...= new int8array([-16, -96, -82, -73]); let u16arr = new uint16array([41200, 47022]); let i16arr = new int16array([-24336, -18514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", which means "hello, world." in our textdecoder() constructor, we specify the windows-1251 character encoding, which is appropriate for cyrillic script. let win1251decoder = new textdecoder('windows-1251'); let bytes = new uint8array([207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33]); console.log(win1251decoder.decode(b...
...And 8 more matches

WEBGL_compressed_texture_etc - Web APIs
ext.compressed_r11_eac one-channel (red) unsigned format compression. ...
... ext.compressed_r11_eac one-channel (red) unsigned format compression. ...
... ext.compressed_r11_eac one-channel (red) unsigned format compression. ...
...And 8 more matches

WebGLRenderingContext.getSupportedExtensions() - Web APIs
webgl extensions extensions for the webgl api are registered in the webgl extension registry. ...
... webgl extensions extensions for the webgl api are registered in the webgl extension registry. ...
...turns a list of all the supported webgl extensions. syntax gl.getsupportedextensions(); return value an array of strings with all the supported webgl extensions. examples var canvas = document.getelementbyid('canvas'); gl = canvas.getcontext('webgl'); var extensions = gl.getsupportedextensions(); // array [ 'angle_instanced_arrays', 'ext_blend_minmax', ... ] see also the webglrenderingcontext.getextension() method to get a specific extension object. webgl extensions extensions for the webgl api are registered in the webgl extension registry. ...
...And 8 more matches

-webkit-text-stroke - CSS: Cascading Style Sheets
the -webkit-text-stroke css property specifies the width and color of strokes for text characters. this is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color. /* width and color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke. <color> the color of the stroke. ...
...webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke. <color> the color of the stroke. ...
...ext-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke. <color> the color of the stroke. ...
...And 8 more matches

Introduction to formatting contexts - CSS: Cascading Style Sheets
this article introduces the concept of formatting contexts, of which there are several types, including block formatting contexts, inline formatting contexts, and flex formatting contexts. the basics of how they behave and how you can make use of these behaviors are also introduced. everything on a page is part of a formatting context, or an area which has been defined to lay out content in a particular way. a block formatting context (bfc) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. each formatting context has specific rules about how layout behaves when in that context. ...
...this means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. ...
...lock formatting context (bfc) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. each formatting context has specific rules about how layout behaves when in that context. block formatting contexts the outermost element in a document that uses block layout rules establishes the first, or initial block formatting context. this means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. elements participating in a bfc use the rules outlined by the css box model, which defines how an element's margins, borders, and padding interact with other blocks in the same context. ...
...And 8 more matches

text-decoration-line - CSS: Cascading Style Sheets
the text-decoration-line css property sets the kind of decoration that is used on text in an element, such as an underline or overline. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
...e. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
...teractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
...And 8 more matches

text-shadow - CSS: Cascading Style Sheets
the text-shadow css property adds shadows to text. it accepts a comma-separated list of shadows to be applied to the text and any of its decorations. each shadow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...orations. each shadow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...e element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* use defaults for color and blur-radius */ text-shadow: 5px 10px; /* global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated list of shadows. e...
...And 8 more matches

<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. it's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. bidirectional text is text that may contain both sequences of characters that are arranged left-to-right (ltr) and sequences of characters that are arranged right-to-left (rtl), such as an arabic quotation embedded in an english string. browsers implement the unicode bidirection...
... some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters. usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. that's where <bdi> comes in. ...
...are treated as neutral and are assigned directionality based on that of their surrounding characters. usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. that's where <bdi> comes in. the <bdi> element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. this works in two ways: the directionality of text embedded in <bdi> does not influence the directionality of the surrounding text. the directionality of text embedded in <bdi> is not influenced by the directionality of the surrounding text. for example, consider some text like: embedded-text - 1st place if embedded-text is ltr, this works fine. but if ...
...And 8 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
nt. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed. the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: ref...
...urrently on. the image is corrupted in some way that prevents it from being loaded. the image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. the image is in a format not supported by the user agent. attributes this element includes the global attributes. alt defines an alternative text description of the image. note: browsers do not always display images. there are a number of situations in which a browser might not display images, such as: non-visual browsers (such as those used by people with visual impairments) the user chooses not to display images (saving bandwidth, privacy reasons) the image is invalid or an unsupported type in these cases, the browser may...
... note: browsers do not always display images. there are a number of situations in which a browser might not display images, such as: non-visual browsers (such as those used by people with visual impairments) the user chooses not to display images (saving bandwidth, privacy reasons) the image is invalid or an unsupported type in these cases, the browser may replace the image with the text in the element's alt attribute. for these reasons and others, provide a useful value for alt whenever possible. omitting alt altogether indicates that the image is a key part of the content and no textual equivalent is available. setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it’s decoration or a tracking pixel), and that non-v...
...And 8 more matches

<input type="password"> - HTML: Hypertext Markup Language
this character will vary depending on the user agent and os. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...gin forms; see insecure passwords. value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password. if the user hasn't entered anything yet, this value is an empty string (""). if the required property is specified, then the password edit box must contain a value other than an empty string to be valid. if the pattern...
... maxlength the maximum number of characters (as utf-16 code units) the user can enter into the password field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the password field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text entered into the field is greater than maxlength utf-16 code units long. minlength the minimum number of characters (as utf-16 code units) the user can enter into the password entry field. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid value is specified, the password input has no minimum length. ...
...And 8 more matches

<input type="tel"> - HTML: Hypertext Markup Language
form can be submitted, because formats for telephone numbers vary so much around the world. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. despite the fact that inputs of type tel are functionally identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient. note: browsers that don't support type tel fall back to b...
... serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient. ...
...ack to being a standard text input. value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string (""). additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: attribute description list th...
...And 8 more matches

<tr>: The Table Row element - HTML: Hypertext Markup Language
. there are also several deprecated attributes, which you should avoid but may need to know when reading older code. deprecated attributes the following attributes may still be implemented in browsers but are no longer part of the html specification and may be missing or may not work as expected. they should be avoided. ...
... char align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). ...
...tally within the cells in the row; this is shorthand for using align on every cell in the row individually. possible values are: left align the content of each cell at its left edge. center center the contents of each cell between their left and right edges. right align the content of each cell at its right edge. justify widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification). char align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). this uses the char and charoff to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow...
...And 8 more matches

<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see the usage notes section for further details on when it's appropriate to use <u> and when it isn't. ...
...And 8 more matches

text-rendering - SVG: Scalable Vector Graphics
the text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text. note: as a presentation attribute, text-rendering can be used as a css property. see the css text-rendering property for more information. ...
... the text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text. note: as a presentation attribute, text-rendering can be used as a css property. see the css text-rendering property for more information. ...
...eoffs to make when rendering text. note: as a presentation attribute, text-rendering can be used as a css property. see the css text-rendering property for more information. ...
...And 8 more matches

Secure contexts - Web security
a secure context is a window or worker for which certain minimum standards of authentication and confidentiality are met. many web apis and features are accessible only in a secure context. the primary goal of secure contexts is to prevent mitm attackers from accessing powerful apis that could further compromise the victim of an attack. why should some features be restricted? some apis on the web are very powerful, giving an attacker the ability to do the following and more: invade a user's privacy. get low-level access to a user's computer. get access to data such as user credentials. when is a context considered secure? a context is considered secure when it meets certain minimum standards of authentication and confidentiality defined in the secure contexts specification. a...
...to do the following and more: invade a user's privacy. get low-level access to a user's computer. get access to data such as user credentials. when is a context considered secure? ...
...low-level access to a user's computer. get access to data such as user credentials. when is a context considered secure? ...
...And 8 more matches

Handling text — strings in JavaScript - Learn web development
previous overview: first steps next next, we'll turn our attention to strings — this is what pieces of text are called in programming. in this article, we'll look at all the common things that you really ought to know about strings when learning javascript, such as creating strings, escaping quotes in strings, and joining strings together. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain familiarity with the basics of strings in javascript. the power of words words are very important to humans — they are a large part of how we communicate. ...
...es in strings, and joining strings together. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain familiarity with the basics of strings in javascript. the power of words words are very important to humans — they are a large part of how we communicate. ...
...e: to gain familiarity with the basics of strings in javascript. the power of words words are very important to humans — they are a large part of how we communicate. since the web is a largely text-based medium designed to allow humans to communicate and share information, it is useful for us to have control over the words that appear on it. html provides structure and meaning to our text, css allows us to precisely style it, and javascript contains a number of features for manipulating strings, creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more. pretty much all of the programs we've shown you so far in the course have involved some string manipulation. strings — the basics strings are d...
...And 7 more matches

HTMLCanvasElement.getContext() - Web APIs
the htmlcanvaselement.getcontext() method returns a drawing context on the canvas, or null if the context identifier is not supported. later calls to this method on the same canvas element return the same drawing context instance as was returned the last time the method was invoked with the same contexttype argument. to get a different drawing context object you need to pass a different contexttype or call the method on a different canvas element. syntax var ctx = canvas.getcontext(contexttype); var ctx = canvas.getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context identifier defining the drawing context associated to the canvas. ...
...s a different contexttype or call the method on a different canvas element. syntax var ctx = canvas.getcontext(contexttype); var ctx = canvas.getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context identifier defining the drawing context associated to the canvas. possible values are: "2d", leading to the creation of a canvasrenderingcontext2d object representing a two-dimensional rendering context. "webgl" (or "experimental-webgl") which will create a webglrenderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 1 (opengl es 2.0). ...
...: "2d", leading to the creation of a canvasrenderingcontext2d object representing a two-dimensional rendering context. "webgl" (or "experimental-webgl") which will create a webglrenderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 1 (opengl es 2.0). "webgl2" which will create a webgl2renderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 2 (opengl es 3.0). "bitmaprenderer" which will create an imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap. note: the identifier "experimental-webgl" is used in new implementations of ...
...And 7 more matches

OfflineAudioContext.startRendering() - Web APIs
the complete event (of type offlineaudiocompletionevent) is raised when the rendering is finished, containing the resulting audiobuffer in its renderedbuffer property. browsers currently support two versions of the startrendering() method — an older event-based version and a newer promise-based version. the former will eventually be removed, but currently both mechanisms are provided for legacy reasons. ...
...r legacy reasons. syntax event-based version: offlineaudioctx.startrendering(); offlineaudioctx.oncomplete = function(e) { // e.renderedbuffer contains the output buffer } promise-based version: offlineaudioctx.startrendering().then(function(buffer) { // buffer contains the output buffer }); parameters none. returns void. example in this simple example, we declare both an audiocontext and an offlineaudiocontext object. we use the audiocontext to load an audio track via xhr (audiocontext.decodeaudiodata), then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the track through. after the offline audio graph is set up, you need to render it to an audiobuffer using offlineaudiocontext.startrendering. when the startrendering() promise resolves, re...
...then the offlineaudiocontext to render the audio into an audiobuffersourcenode and play the track through. after the offline audio graph is set up, you need to render it to an audiobuffer using offlineaudiocontext.startrendering. when the startrendering() promise resolves, rendering has completed and the output audiobuffer is returned out of the promise. at this point we create another audio context, create an audiobuffersourcenode inside it, and set its buffer to be equal to the promise audiobuffer. this is then played as part of a simple standard audio graph. ...
...And 7 more matches

Text - Web APIs
the text interface represents the textual content of element or attr. if an element has no markup within its content, it has a single child implementing text that contains the element's text. however, if the element contains markup, it is parsed into information items and text nodes that form its children. new documents have a single text node for each block of text. over time, more text nodes may be created as the document's content changes. the node.normalize() method merges adjacent text objects back into a single node for each block of text. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" ...
...lock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50"...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" heigh...
...And 7 more matches

WebGLRenderingContext.texParameter[fi]() - Web APIs
the webglrenderingcontext.texparameter[fi]() methods of the webgl api set texture parameters. syntax void gl.texparameterf(glenum target, glenum pname, glfloat param); void gl.texparameteri(glenum target, glenum pname, glint param); parameters target a glenum specifying the binding point (target). possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. the pname parameter is a glenum specifying the texture parameter to set. the param parameter is a glfloat or glint specifying the value for the specified parameter pname. pn...
...lable additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. the pname parameter is a glenum specifying the texture parameter to set. the param parameter is a glfloat or glint specifying the value for the specified parameter pname. pname description param available in webgl 1 gl.texture_mag_filter texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. ...
... pname description param available in webgl 1 gl.texture_mag_filter texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. gl.texture_wrap_s wrapping function for texture coordinate s gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_wrap_t wrapping function for texture coordinate t gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. ...
...And 7 more matches

WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. syntax // webgl 1: void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, imagedata? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, htmlimageelement? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, htmlcanvaselement? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, htmlvideoelement? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, imagebitmap? pixels); // webgl 2: void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, glint...
...image2d(target, level, xoffset, yoffset, width, height, format, type, imagebitmap source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, imagedata source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_po...
...wo-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_positive_z: positive z face for a cube-mapped texture. gl.texture_cube_map_negative_z: negative z face for a cube-mapped texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the lower left texel x coordinate of a width-wide by height-wide rectangular subregion of the texture array. yoffset a glint specifying the lower left texel...
...And 7 more matches

XMLHttpRequest.responseText - Web APIs
you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok"). ...
... you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok"). ...
... you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok"). ...
...And 7 more matches

text-emphasis - CSS: Cascading Style Sheets
the text-emphasis css property applies emphasis marks to text (except spaces and control characters). it is a shorthand for text-emphasis-style and text-emphasis-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. however, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents. ...
... a pull request. the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. however, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents. the size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks. text-emphasis doesn't reset the value of text-emphasis-position. this is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. in the very rare cases when this is needed, the property text-emphasis-position. constituent properties this pr...
...s not enough for the marks. text-emphasis doesn't reset the value of text-emphasis-position. this is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. in the very rare cases when this is needed, the property text-emphasis-position. constituent properties this property is a shorthand for the following css properties: text-emphasis-color text-emphasis-style syntax /* initial value */ text-emphasis: none; /* no emphasis marks */ /* <string> value */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25b2'; text-emphasis: '*' #555; text-emphasis: 'foo'; /* should not use. ...
...And 7 more matches

text-underline-position - CSS: Cascading Style Sheets
the text-underline-position css property specifies the position of the underline which is set using the text-decoration property's underline value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ext-underline-position css property specifies the position of the underline which is set using the text-decoration property's underline value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...erty specifies the position of the underline which is set using the text-decoration property's underline value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 7 more matches

<a>: The Anchor element - HTML: Hypertext Markup Language
. when the link is followed, the browser will send post requests with the body ping to the urls. typically for tracking. referrerpolicy how much of the referrer to send when following the link. see referrer-policy for possible values and their effects. rel the relationship of the linked url as space-separated link types. ...
... much of the referrer to send when following the link. see referrer-policy for possible values and their effects. rel the relationship of the linked url as space-separated link types. target where to display the linked url, as the name for a browsing context (a tab, window, or <iframe>). the following keywords have special meanings for where to load the url: _self: the current browsing context. (default) _blank: usually a new tab, but users can configure browsers to open a new window instead. _parent: the parent browsing context of the current one. if no parent, behaves as _self. _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). if no ancestors, behaves as _self. note: when using target, add rel="noreferrer noopener" to avoi...
...button and moving it. ...
...And 7 more matches

<input type="date"> - HTML: Hypertext Markup Language
<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. the resulting value includes the year, month, and day, but not the time. the time and datetime-local input types support time and date+time input. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input ui generally varies from browser to browser; see browser compatibility for further details. in unsupported browsers, the control degrades gracefully to <input type="text">. among browsers with custom interfaces for selecting dates are chrome and ope...
...o restrict the dates that can be chosen by the user. in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget. note: you should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. to only make saturdays selectable). however, this does not seem to be in any implementation at the time of writing. controlling input size <input type="date"> doesn't support fo...
...input type="date"> doesn't support form sizing attributes such as size. prefer css for sizing it. validation by default, <input type="date"> doesn't validate the entered value beyond its format. the interfaces generally don't let you enter anything that isn't a date — which is helpful — but you can leave the field empty or enter an invalid date in browsers where the input falls back to type text (like the 32nd of april). if you use min and max to restrict the available dates (see setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is out of bounds. however, you'll need to double-check the submitted results to ensure the value is within these dates, if the date picker isn't fully supported on the user's device. you can also use ...
...And 7 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
o the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the user's local date and time. in other words, an implementation should allow any valid combination of year, month, day, hour, and minute - even if such a combination is invalid in the user's local time zone (such as times within a daylight saving time spring-forward transition gap). some mobile brows...
...rently implement this correctly. because of the limited browser support for datetime-local, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. another option is to use separate date and time inputs, each of which is more widely supported than datetime-local. some browsers may resort to a text-only input element that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it. for those of you not using a supporting browser, the chrome/opera datetime-local control looks like the below screenshot. clicking the down arrow on the right hand side brings up a da...
...oo large, is of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using date inputs at the time of writing is browser support — only chrome/opera and edge support it on desktop, and most modern browsers on mobile. ...
...And 7 more matches

Text formatting - JavaScript
it is a set of "elements" of 16-bit unsigned integer values (utf-16 code units). each element in the string occupies a position in the string. the first element is at index 0, the next at index 1, and so on. the length of a string is the number of elements in it. you can create strings using string literals or string objects. caution: if you edit this page, do not include any characters above u+ffff, until mdn bug 857438 is fixed ( https://bugzilla.mozilla.org/show_bug.cgi?id=857438 ). ...
...arcodeat, codepointat return the character or character code at the specified position in string. indexof, lastindexof return the position of specified substring in the string or last position of specified substring, respectively. startswith, endswith, includes returns whether or not the string starts, ends or contains a specified string. concat combines the text of two strings and returns a new string. fromcharcode, fromcodepoint constructs a string from the specified sequence of unicode values. this is a method of the string class, not a string instance. split splits a string object into an array of strings by separating the string into substrings. slice extracts a section of a string and returns a new string. ...
... `) (grave accent) character instead of double or single quotes. template literals can contain place holders. these are indicated by the dollar sign and curly braces (${expression}). multi-lines any new line characters inserted in the source are part of the template literal. ...
...And 7 more matches

<text> - SVG: Scalable Vector Graphics
the svg <text> element draws a graphics element consisting of text. it's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other svg graphics element. if text is included in svg not inside of a <text> element, it is not rendered. this is different than being hidden by default, as setting the display property won't show the text. ...
... included in svg not inside of a <text> element, it is not rendered. this is different than being hidden by default, as setting the display property won't show the text. ...
...t show the text. html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. ...
...And 7 more matches

<textPath> - SVG: Scalable Vector Graphics
if the path attribute is set, href has no effect. ...
...if the path attribute is set, href has no effect. ...
...if the path attribute is set, href has no effect. ...
...And 7 more matches

mozbrowsercontextmenu
this event can be used to control what will appear in the menu. ...
...this event can be used to control what will appear in the menu. ...
...e coordinate that was clicked inside the browser <iframe>'s viewport. systemtargets an array containing one or more menusystem objects (see the menusystem object, below), containing details of the standard menu(s) that will be shown. for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with information related to the image, and one for the link. ...
...And 6 more matches

Document.createTextNode() - Web APIs
creates a new text node. this method can be used to escape html characters. syntax var text = document.createtextnode(data); text is a text node. data is a string containing the data to be put in the text node. ...
... creates a new text node. this method can be used to escape html characters. syntax var text = document.createtextnode(data); text is a text node. data is a string containing the data to be put in the text node. ...
... creates a new text node. this method can be used to escape html characters. syntax var text = document.createtextnode(data); text is a text node. data is a string containing the data to be put in the text node. ...
...And 6 more matches

EXT_shader_texture_lod - Web APIs
the ext_shader_texture_lod extension is part of the webgl api and adds additional texture functions to the opengl es shading language which provide the shader writer with explicit control of lod (level of detail). webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default. it requires glsl #version 300 es. ...
...method. for more information, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default. it requires glsl #version 300 es. ...
...webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default. it requires glsl #version 300 es. ...
...And 6 more matches

Node.textContent - Web APIs
the textcontent property of the node interface represents the text content of the node and its descendants. note: textcontent and htmlelement.innertext are easily confused, but the two properties are different in important ways. syntax let text = somenode.textcontent someothernode.textcontent = string value a string or null description the value of textcontent depends on the situation: if the node is a document or a doctype, textcontent returns null. note: to get all of the text and cdata data for the whole document, one could use document.documentelement.textcontent. if the node is a cdata section, comment, processing instruction, or text node, textcontent returns the text inside the node, i.e., the node.nodevalue. ...
...tent depends on the situation: if the node is a document or a doctype, textcontent returns null. note: to get all of the text and cdata data for the whole document, one could use document.documentelement.textcontent. if the node is a cdata section, comment, processing instruction, or text node, textcontent returns the text inside the node, i.e., the node.nodevalue. for other node types, textcontent returns the concatenation of the textcontent of every child node, excluding comments and processing instructions. (this is an empty string if the node has no children.) setting textcontent on a node removes all of the node's children and replaces them with a single text node with the given string value. ...
...he node, i.e., the node.nodevalue. for other node types, textcontent returns the concatenation of the textcontent of every child node, excluding comments and processing instructions. (this is an empty string if the node has no children.) setting textcontent on a node removes all of the node's children and replaces them with a single text node with the given string value. differences from innertext don't get confused by the differences between node.textcontent and htmlelement.innertext. although the names seem similar, there are important differences: textcontent gets the content of all elements, including <script> and <style> elements. in contrast, innertext only shows “human-readable” elements. ...
...And 6 more matches

WEBGL_compressed_texture_s3tc_srgb - Web APIs
the webgl_compressed_texture_s3tc_srgb extension is part of the webgl api and exposes four s3tc compressed texture formats for the srgb colorspace. compressed textures reduce the amount of memory needed to store a texture on the gpu, allowing for higher resolution textures or more of the same resolution textures. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to both webgl1 and webgl2 contexts. constants the compressed texture formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ext.compressed_srgb_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format. ...
..._s3tc_dxt1_ext a dxt1-compressed image in an srgb image format. ext.compressed_srgb_alpha_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format with a simple on/off alpha value. ext.compressed_srgb_alpha_s3tc_dxt3_ext a dxt3-compressed image in an srgba image format. ext.compressed_srgb_alpha_s3tc_dxt5_ext a dxt5-compressed image in an srgba image format. ...
...ssed image in an srgb image format. ext.compressed_srgb_alpha_s3tc_dxt1_ext a dxt1-compressed image in an srgb image format with a simple on/off alpha value. ext.compressed_srgb_alpha_s3tc_dxt3_ext a dxt3-compressed image in an srgba image format. ext.compressed_srgb_alpha_s3tc_dxt5_ext a dxt5-compressed image in an srgba image format. ...
...And 6 more matches

WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. syntax void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, arraybufferview? srcdata, optional srcoffset); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, imagebitmap? pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, imagedata? pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, htmlimageelement? pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, htmlcanvaselement? pixels); void gl.texsubimag...
... zoffse...
... type, htmlcanvaselement? pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, htmlvideoelement? pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, glintptr offset); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the x offset within the texture image. yoffset a glint specifying the y offset within the texture image. zoffset a glint specifying the z offse...
...And 6 more matches

WebGLRenderingContext.getTexParameter() - Web APIs
the webglrenderingcontext.gettexparameter() method of the webgl api returns information about the given texture. syntax any gl.gettexparameter(target, pname); parameters target a glenum specifying the binding point (target). possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map: a cube-mapped texture. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. pname a glenum specifying the information to query. ...
...ure. when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. pname a glenum specifying the information to query. possible values: pname return type description possible return values available in a webgl 1 context gl.texture_mag_filter glenum texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter glenum texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. ...
... available in a webgl 1 context gl.texture_mag_filter glenum texture magnification filter gl.linear (default value), gl.nearest. gl.texture_min_filter glenum texture minification filter gl.linear, gl.nearest, gl.nearest_mipmap_nearest, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear (default value), gl.linear_mipmap_linear. gl.texture_wrap_s glenum wrapping function for texture coordinate s gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_wrap_t glenum wrapping function for texture coordinate t gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. ...
...And 6 more matches

text-decoration-skip - CSS: Cascading Style Sheets
the text-decoration-skip css property sets what parts of an element’s content any text decoration affecting the element must skip over. it controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. note: most other browsers are converging on supporting the simpler text-decoration-skip-ink property. ...
... the text-decoration-skip css property sets what parts of an element’s content any text decoration affecting the element must skip over. it controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. note: most other browsers are converging on supporting the simpler text-decoration-skip-ink property. ...
...coration-skip css property sets what parts of an element’s content any text decoration affecting the element must skip over. it controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. note: most other browsers are converging on supporting the simpler text-decoration-skip-ink property. ...
...And 6 more matches

text-rendering - CSS: Cascading Style Sheets
the text-rendering css property provides information to the rendering engine about what to optimize for when rendering text. the browser makes trade-offs among speed, legibility, and geometric precision. /* keyword values */ text-rendering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /* global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard. however, gecko and webkit browsers let you apply this property to html and xml content on windows, macos, and linux. ...
...for differences in how this value is interpreted by the browser, see the compatibility table. ...
...it disables kerning and ligatures. ...
...And 6 more matches

<button>: The Button element - HTML: Hypertext Markup Language
there is no form owner. formenctype html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted. possible values: application/x-www-form-urlencoded: the default if the attribute is not used. multipart/form-data: use to submit <input> elements with their type attributes set to file. text/plain: specified as a debugging aid; shouldn’t be used for real form submission. if this attribute is specified, it overrides the enctype attribute of the button's form owner. formmethod html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the http method used to submit the form. possible values: post:...
... novalidate attribute of the button's form owner. this attribute is also available on <input type="image"> and <input type="submit"> elements. formtarget html5 if the button is a submit button, this attribute is a author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. ...
...d name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. this is the name of, or keyword for, a browsing context (a tab, window, or <iframe>). if this attribute is specified, it overrides the target attribute of the button's form owner. the following keywords have special meanings: _self: load the response into the same browsing context as the current one. this is the default if the attribute is not specified. _blank: load the response into a new unnamed browsing context — usually a new tab or window, depending on the user’s browser settings. _parent: load the response into the parent browsing context of the current one. if there is no parent, this option behaves the same way as _self. _top: load the response into the ...
...And 6 more matches

<input type="time"> - HTML: Hypertext Markup Language
elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds). the control's user interface will vary from browser to browser. support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it degrades gracefully to <input type="text">. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system lo...
...dds code to the time input to watch for the input event, which is triggered every time the contents of an input element change. when this happens, the contents of the <span> are replaced with the new value of the input element. var starttime = document.getelementbyid("starttime"); var valuespan = document.getelementbyid("value"); starttime.addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data. the form's data entry for a time input will always be in the form name=hh%3amm, or name=hh%3amm%3ass if seconds are included (see using the step attribute). additional attributes in addition to the attributes common to all <input> elements, time inputs...
... support as mentioned above, safari and a few other, less common, browsers don't yet support time inputs natively. in general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. ...
...And 6 more matches

<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
attributes. deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if this attribute is not set, the left value is assumed. note: do not use this attribute as it is obsolete (not supported) in the latest standard. to achieve the same effect as...
... bgcolor this attribute defines the background color of each cell of the column. it is one of the 6-digit hexadecimal code as defined in srgb, prefixed by a '#'. ...
... bgcolor this attribute defines the background color of each cell of the column. ...
...And 6 more matches

<thead>: The Table Head element - HTML: Hypertext Markup Language
includes the global attributes. deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if this attribute is not set, the left value is assumed. note: do not use this attribute as it is obsolete (not supported) in the latest standard. to achieve the same effect as...
... bgcolor this attribute defines the background color of each cell of the column. it is one of the 6-digit hexadecimal code as defined in srgb, prefixed by a '#'. ...
... bgcolor this attribute defines the background color of each cell of the column. ...
...And 6 more matches

Object.preventExtensions() - JavaScript
the object.preventextensions() method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax object.preventextensions(obj) parameters obj the object which should be made non-extensible. return value the object being made non-extensible. description an object is extensible if new properties can be added to it. object.preventextensions() marks an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. note that the prope...
... longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible. note that the properties of a non-extensible object, in general, may still be deleted. attempting to add new properties to a non-extensible object will fail, either silently or by throwing a typeerror (most commonly, but not exclusively, when in strict mode). object.preventextensions() only prevents addition of own properties. properties can still be added to the object prototype. this method makes the [[prototype]] of the target immutable; any [[prototype]] re-assignment will throw a typeerror. this behavior is specific to the internal [[prototype]] property, other properties of the target object will remain mutable. there is no way to make an object extensible ag...
... be added to the object prototype. this method makes the [[prototype]] of the target immutable; any [[prototype]] re-assignment will throw a typeerror. this behavior is specific to the internal [[prototype]] property, other properties of the target object will remain mutable. there is no way to make an object extensible again once it has been made non-extensible. ...
...And 6 more matches

<mtext> - MathML
you can use #rgb, #rrggbb and html color names. mathsize the size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. ...
...you can use #rgb, #rrggbb and html color names. mathsize the size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. ...
...you can use #rgb, #rrggbb and html color names. mathsize the size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. mathvariant this attribute specifies the logical class of the identifier, which varies in typography. ...
...And 6 more matches

textbox.type - Archive of obsolete content
« xul reference home type type: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers. in addition, arrow buttons appear next to the textbox to let the user step through values. ...
...the command event will fire as the user modifies the value. a listener for the command event should update search results. ...
...the command event will fire as the user modifies the value. a listener for the command event should update search results. if the searchbutton attribute is set to true, the command event is only fired if the user presses the search button or presses the enter key. ...
...And 5 more matches

JS_ClearContextThread
obsolete since jsapi 8this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. transfer a jscontext from one thread to another. syntax jsword js_clearcontextthread(jscontext *cx); jsword js_setcontextthread(jscontext *cx); name type description cx jscontext * the context to transfer from one thread to another. there must not be any active or suspended requests using this context. ...
...ansfer a jscontext from one thread to another. syntax jsword js_clearcontextthread(jscontext *cx); jsword js_setcontextthread(jscontext *cx); name type description cx jscontext * the context to transfer from one thread to another. there must not be any active or suspended requests using this context. description an application that creates or uses a jscontext in one thread, then uses or destroys it in another thread, must use js_clearcontextthread and js_setcontextthread to transfer the jscontext safely from one thread to the other. the rules for using jscontexts in multiple threads are: each jscontext may only be used by one thread at a time. each request runs from start to finish on a single thread. ...
... uses a jscontext in one thread, then uses or destroys it in another thread, must use js_clearcontextthread and js_setcontextthread to transfer the jscontext safely from one thread to the other. the rules for using jscontexts in multiple threads are: each jscontext may only be used by one thread at a time. each request runs from start to finish on a single thread. before transferring a jscontext from thread a to thread b, thread a must call js_clearcontextthread. this is the last thing thread a does with the context. before thread b uses the jscontext, it must call js_setcontextthread. this is the first thing thread b does with the context, before beginning a request. ...
...And 5 more matches

JS_ContextIterator
obsolete since jsapi 52this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. cycles through the js contexts associated with a particular jsruntime. syntax jscontext * js_contextiterator(jsruntime *rt, jscontext **iterp); name type description rt jsruntime * the runtime to walk. iterp jscontext * in-out parameter. on input, *iterp must be null or point to a context in rt. ...
...ed with a particular jsruntime. syntax jscontext * js_contextiterator(jsruntime *rt, jscontext **iterp); name type description rt jsruntime * the runtime to walk. iterp jscontext * in-out parameter. on input, *iterp must be null or point to a context in rt. on success, the value of *iterp is modified so that repeated calls cycle through all the contexts in rt. description js_contextiterator steps through the set of contexts associated with the runtime rt. each call to js_contextiterator returns the next context in the cycle. iterp must point to a variable of type jscontext *. if *iterp is null, js_contextiterator modifies it to point to the first jscontext in the list. ...
...rough all the contexts in rt. description js_contextiterator steps through the set of contexts associated with the runtime rt. each call to js_contextiterator returns the next context in the cycle. iterp must point to a variable of type jscontext *. if *iterp is null, js_contextiterator modifies it to point to the first jscontext in the list. otherwise *iterp must point to an existing context in rt, and js_contextiterator modifies it to point to the next context in the list, if any, and null otherwise. js_contextiterator returns the new value of *iterp. ...
...And 5 more matches

AudioContextOptions.sampleRate - Web APIs
the value must be compatible with audiobuffer.samplerate. ...
...the value must be compatible with audiobuffer.samplerate. ...
...the value must be compatible with audiobuffer.samplerate. ...
...And 5 more matches

BaseAudioContext.createBuffer() - Web APIs
note: createbuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createbuffer() was blocking other code execution. the asynchronous method decodeaudiodata() does the same thing — takes compressed audio, say, an mp3 file, and directly gives you back an audiobuffer that you can then set to play via in an audiobuffersourcenode. ...
...hread, therefore createbuffer() was blocking other code execution. the asynchronous method decodeaudiodata() does the same thing — takes compressed audio, say, an mp3 file, and directly gives you back an audiobuffer that you can then set to play via in an audiobuffersourcenode. for simple uses like playing an mp3, decodeaudiodata() is what you should be using. syntax var buffer = baseaudiocontext.createbuffer(numofchannels, length, samplerate); parameters note: for an in-depth explanation of how audio buffers work, and what these parameters mean, read audio buffers: frames, samples and channels from our basic concepts guide. numofchannels an integer representing the number of channels this buffer should have. the default value is 1, and all user agents must support at least 32 cha...
...ns notsupportederror one or more of the options are negative or otherwise has an invalid value (such as numberofchannels being higher than supported, or a samplerate outside the nominal range). rangeerror there isn't enough memory available to allocate the buffer. ...
...And 5 more matches

CanvasRenderingContext2D.arcTo() - Web APIs
the arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters. this method is commonly used for making rounded corners. note: be aware that you may get unexpected results when using a relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius. syntax void ctx.arcto(x1, y1, x2, y2, radius); parameters x1 the x-axis coordinate of the first control point. y1 the y-axis coordinate of the first control point. x2 the x-axis coordinate of the second control point. ...
... point to a first control point, and another from there to a second control point. without arcto(), these two segments would form a sharp corner: arcto() creates a circular arc that fits this corner and smooths is out. in other words, the arc is tangential to both segments. ...
...t specified by moveto(): (230, 20). it is shaped to fit control points at (90, 130) and (20, 20), and has a radius of 50. the lineto() method connects the arc to (20, 20) with a straight line. note that the arc's second control point and the point specified by lineto() are the same, which produces a totally smooth corner. ...
...And 5 more matches

CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
the canvasrenderingcontext2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified element is focused. syntax void ctx.drawfocusifneeded(element); void ctx.drawfocusifneeded(path, element); parameters element the element to check whether it is focused or not. path a path2d path to use. examples managing button focus this example draws two buttons on a canvas. the drawfocusifneeded() method is used to draw a focus ring when appropriate. ...
... or not. path a path2d path to use. examples managing button focus this example draws two buttons on a canvas. the drawfocusifneeded() method is used to draw a focus ring when appropriate. ...
...{ button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ? ...
...And 5 more matches

CanvasRenderingContext2D.putImageData() - Web APIs
if a dirty rectangle is provided, only the pixels from that rectangle are painted. this method is not affected by the canvas transformation matrix. note: image data can be retrieved from a canvas using the getimagedata() method. you can find more information about putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas. syntax void ctx.putimagedata(imagedata, dx, dy); void ctx.putimagedata(imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight); parameters imagedata an imagedata object containing the array of pixel values. ...
... optional height of the rectangle to be painted. defaults to the height of the image data. errors thrown notsupportederror thrown if any of the arguments is infinite. invalidstateerror thrown if the imagedata object's data has been detached. ...
...ny of the arguments is infinite. invalidstateerror thrown if the imagedata object's data has been detached. examples understanding putimagedata to understand what this algorithm does under the hood, here is an implementation on top of canvasrenderingcontext2d.fillrect(). ...
...And 5 more matches

File.getAsText() - Web APIs
obsolete since gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. summary the getastext method provides the file's data interpreted as text using a given encoding. note: this method is obsolete; you should use the filereader method readastext() instead. syntax var str = instanceoffile.getastext(encoding); parameters encoding a string indicating the encoding to use for the returned data. if this string is empty, utf-8 is assumed. returns a string containing the file's data interpreted as text in the specified encoding. example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var file...
...ing containing the file's data interpreted as text in the specified encoding. ...
...ing the file's data interpreted as text in the specified encoding. ...
...And 5 more matches

TextTrack: cuechange event - Web APIs
the cuechange event fires when a texttrack has changed the currently displaying cues. the event is fired at both the texttrack and at the htmltrackelement in which it's being presented, if any. ...
... the cuechange event fires when a texttrack has changed the currently displaying cues. the event is fired at both the texttrack and at the htmltrackelement in which it's being presented, if any. ...
...n a texttrack has changed the currently displaying cues. the event is fired at both the texttrack and at the htmltrackelement in which it's being presented, if any. ...
...And 5 more matches

TextTrack - Web APIs
the texttrack interface—part of the api for handling webvtt (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element. properties this interface also inherits properties from eventtarget. texttrack.activecues read only a texttrackcuelist object listing the currently active set of text track cues. track cues are active if the current playback position of the media is between the cues' start and end times. thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed. texttrack.cues read only a texttrackcuelist which contains all of the track's cues. texttrack.id read only a domstring which identifies the track, if it has one. if it doesn't have an id, then this value is an e...
...of the media is between the cues' start and end times. thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed. texttrack.cues read only a texttrackcuelist which contains all of the track's cues. texttrack.id read only a domstring which identifies the track, if it has one. if it doesn't have an id, then this value is an empty string (""). if the texttrack is associated with a <track> element, then the track's id matches the element's id. texttrack.inbandmetadatatrackdispatchtype read only returns a domstring which indicates the track's in-band metadata track dispatch type. ...
...track.id read only a domstring which identifies the track, if it has one. if it doesn't have an id, then this value is an empty string (""). if the texttrack is associated with a <track> element, then the track's id matches the element's id. texttrack.inbandmetadatatrackdispatchtype read only returns a domstring which indicates the track's in-band metadata track dispatch type. needs details texttrack.kind read only returns a domstring indicating what kind of text track the texttrack describes. the value must be one of those in the texttrackkind enum. ...
...And 5 more matches

TextTrackList - Web APIs
onchange an event handler to be called when the change event occurs. ...
... onchange an event handler to be called when the change event occurs. ...
... onchange an event handler to be called when the change event occurs. ...
...And 5 more matches

WebGLRenderingContext.makeXRCompatible() - Web APIs
the webglrenderingcontext method makexrcompatible() ensures that the rendering context described by the webglrenderingcontext is ready to render the scene for the immersive webxr device on which it will be displayed. if necessary, the webgl layer may reconfigure the context to be ready to render to a different device than it originally was. this is useful if you have an application which can start out being presented on a standard 2d display but can then be transitioned to a 3d immersion system. syntax let makecompatpromise = webglrenderingcontext.makexrcompatible(); parameters none. return value a promise which successfully resolves once the webgl context is ready to be used for rendering webxr content. exceptions this method doesn't throw traditional exceptions; instead, the promis...
...romise = webglrenderingcontext.makexrcompatible(); parameters none. return value a promise which successfully resolves once the webgl context is ready to be used for rendering webxr content. exceptions this method doesn't throw traditional exceptions; instead, the promise rejects with one of the following errors as the value passed into the rejection handler: aborterror switching the context over to the webxr-compatible context failed. invalidstateerror the webgl context has been lost or there is no available webxr device. usage notes because makexrcompatible() may involve replacing the underlying webgl context with a new one that uses the new rendering hardware, the existing contents of the context may be lost and, therefore, would need to be re-rendered. this is why the webglc...
...ver to the webxr-compatible context failed. invalidstateerror the webgl context has been lost or there is no available webxr device. usage notes because makexrcompatible() may involve replacing the underlying webgl context with a new one that uses the new rendering hardware, the existing contents of the context may be lost and, therefore, would need to be re-rendered. this is why the webglcontextlost and webglcontextrestored events are used: the first gives you the opportunity to discard anything you won't need anymore, while the second gives you the opportunity to load resources and prepare to render the scene in its new context. while this method is available through the webglrenderingcontext interface, it's actually defined by the webxr device api rather than by webgl. examples this...
...And 5 more matches

WebGLRenderingContext.vertexAttribPointer() - Web APIs
syntax void gl.vertexattribpointer(index, size, type, normalized, stride, offset); parameters index a gluint specifying the index of the vertex attribute that is to be modified. size a glint specifying the number of components per vertex attribute. must be 1, 2, 3, or 4. type a glenum specifying the data type of each component in the array. ...
... data type of each component in the array. possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 16-bit integer, with values in [-32768, 32767] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short: unsigned 16-bit integer, with values in [0, 65535] gl.float: 32-bit ieee floating point number when using a webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a float. for types gl.byte and gl.short, normalizes the values to [-1, 1] if true. for types gl.unsigned_byte and gl.unsigned_short, normalizes the va...
... the vertex attribute array. must be a multiple of the byte length of type. return value none. exceptions a gl.invalid_value error is thrown if offset is negative. a gl.invalid_operation error is thrown if stride and offset are not multiples of the size of the data type. a gl.invalid_operation error is thrown if no webglbuffer is bound to the array_buffer target. ...
...And 5 more matches

Adding 2D content to a WebGL context - Web APIs
the complete source code for this project is available on github. this project uses the glmatrix library to perform its matrix operations, so you will need to include that in your project. we're loading a copy from a cdn in our html's <head>. drawing the scene the most important thing to understand before we get started is that even though we're only rendering a square plane object in this example, we're still drawing in 3d space. ...
...der is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors. there are two shader functions run when drawing webgl content: the vertex shader and the fragment shader. you write these in glsl and pass the text of the code into webgl to be compiled for execution on the gpu. together, a set of vertex and fragment shaders is called a shader program. let's take a quick look at the two types of shader, with the example in mind of drawing a 2d shape into the webgl context. vertex shader each time a shape is rendered, the vertex shader is run for each vertex in the shape. its job is to transform the input ...
...l size, or any other factors. the vertex shader must perform the needed transforms on the vertex's position, make any other adjustments or calculations it needs to make on a per-vertex basis, then return the transformed vertex by saving it in a special variable provided by glsl, called gl_position. the vertex shader can, as needed, also do things like determine the coordinates within the face's texture of the texel to apply to the vertex, apply the normals to determine the lighting factor to apply to the vertex, and so on. this information can then be stored in varyings or attributes as appropriate to be shared with the fragment shader. our vertex shader below receives vertex position values from an attribute we define called avertexposition. that position is then multiplied by two 4x4 matr...
...And 5 more matches

Block formatting context - Developer guides
floats (elements where float isn't none). absolutely positioned elements (elements where position is absolute or fixed). inline-blocks (elements with display: inline-block). table cells (elements with display: table-cell, which is the default for html table cells). table captions (elements with display: table-caption, which is the default for html table captions). ...
...e-flex) if they are neither flex nor grid nor table containers themselves. grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves. multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1). column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (spec change, chrome bug). formatting contexts affect layout, but typically, we create a new block formatting context for the positioning and clearing floats rather than changing the layout, because an element that establishes a new block formatting context will: contain internal floats. exclude external floats.
...there's no floating children avaliable inside a flex/grid container, but exclude external floats and suppress margin collapsing still works. examples contain internal floats make float content and alongside content the same height. ...
...And 5 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
url for the current document. link not allowed not allowed dns-prefetch tells the browser to preemptively perform dns resolution for the target resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document. not allowed annotation annotation help link to context-sensitive help. link link link icon icon representing the current document. external resource not allowed not allowed license indicates that the main content of the current document is covered by the copyright license described by the referenced document. link link link manifest web app manifest link not allowed not allowed ...
...owed next indicates that the current document is a part of a series, and that the next document in the series is the referenced document. link link link nofollow indicates that the current document's original author or publisher does not endorse the referenced document. not allowed annotation annotation noopener creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). not allowed annotation annotation noreferrer no referer header will be included. additionally, has the same effect as noopener. not allowed annotation annotation opener creates an auxiliary browsing conte...
...reate either of those to begin with (i.e., has an appropriate target attribute value). not allowed annotation annotation noreferrer no referer header will be included. additionally, has the same effect as noopener. not allowed annotation annotation opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value). not allowed annotation annotation pingback gives the address of the pingback server that handles pingbacks to the current document. external resource not allowed not allowed preconnect specifies that the user agent should preemptively connect to the target resource's ...
...And 5 more matches

<colgroup> - HTML: Hypertext Markup Language
ference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. ...
...this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes. if this attribute is not set, the left value is assumed. the descendant <col> elements may override this value using their own align attribute. note: do not try to set the text-align property on a selector giving a <colgroup> element. because <td> elements are not descendant of the <co...
... if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. bgcolor the background color of the table. it is a 6-digit hexadecimal rgb code, prefixed by a '#'. one of the predefined color kewords can also be used. ...
...And 5 more matches

<input type="button"> - HTML: Hypertext Markup Language
source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images. value a domstring used as the button's label events click supported common attributes type, and value idl attributes value methods none value an <input type="button"> elements' value attribute contains a domstring that is used as t...
...ype="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). to make buttons do anything, you have to write javascript code to do the work. ...
...addeventlistener() is then used to establish a function that will be run when click events occur on the button. ...
...And 5 more matches

<input type="submit"> - HTML: Hypertext Markup Language
n attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod the http method (get or post) to use when submitting the form. formnovalidate a boolean which, if present, means the form's fields will not be subjected to constraint validation before submitting the data to the server formtarget the browsing context into which to load the response returned by the server after submitting the form formaction a string indicating the url to which to submit the data. this takes precedence over the action attribute on the <form> element that owns the <input>. this attribute is also available on <input type="image"> and <button> elements. formenctype a string that identifies the encoding method to use wh...
... attribute on the <form> element that owns the <input>. this attribute is also available on <input type="image"> and <button> elements. formenctype a string that identifies the encoding method to use when submitting the form data to the server. there are three permitted values: application/x-www-form-urlencoded this, the default value, sends the form data as a string after url encoding the text using an algorithm such as encodeuri(). multipart/form-data uses the formdata api to manage the data, allowing for files to be submitted to the server. you must use this encoding type if your form includes any <input> elements of type file (<input type="file">). text/plain plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted. if specified, the ...
...uld not be validated before submission to the server. this overrides the value of the novalidate attribute on the element's owning form. this attribute is also available on <input type="image"> and <button> elements. formtarget a string which specifies a name or keyword that indicates where to display the response received after submitting the form. the string must be the name of a browsing context (that is, a tab, window, or <iframe>. a value specified here overrides any target given by the target attribute on the <form> that owns this input. in addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used: _self loads the response into the same browsing context as the one that contains the form. this will replace the current docume...
...And 5 more matches

Global attributes - HTML: Hypertext Markup Language
the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes. the multiple aria-* attributes, used for improving accessibility. ...
..., onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting. list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard layout. autocapitalize controls whether and how text input is automatically capitalized as it is entered/edited by the user. it can have the following values: off or none, no autocapitalization is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters...
...d document.getelementsbyclassname(). contenteditable an enumerated attribute indicating if the element should be editable by the user. if so, the browser modifies its widget to allow editing. the attribute must take one of the following values: true or the empty string, which indicates that the element must be editable; false, which indicates that the element must not be editable. contextmenu the id of a <menu> to use as the contextual menu for this element. data-* forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the html and its dom representation that may be used by scripts. all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset prop...
...And 5 more matches

Inline elements - HTML: Hypertext Markup Language
since this is a presentational characteristic it is nowadays specified by css in the flow layout. inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. in this article, we'll examine html inline-level elements and how they differ from block-level elements. an inline element does not start on a new line and only takes up as much width as necessary. inline vs. block-level elements: a demonstration this is most easily demonstrated with a simple example. ...
...css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text. ...
...using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text. ...
...And 5 more matches

text-decoration - SVG: Scalable Vector Graphics
the text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. it is a shorthand for the text-decoration-line and text-decoration-style properties. the fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared. the paint order of the text decoration, i.e. the fill and stroke, is determined by the value of the paint-order attribute at the point where the text decoration is declared. note: as a presentation attribute, text-decoration can be used as a css property. see the css text-decoration property for more information. ...
...e fill and stroke, is determined by the value of the paint-order attribute at the point where the text decoration is declared. note: as a presentation attribute, text-decoration can be used as a css property. see the css text-decoration property for more information. ...
...nd stroke, is determined by the value of the paint-order attribute at the point where the text decoration is declared. note: as a presentation attribute, text-decoration can be used as a css property. see the css text-decoration property for more information. ...
...And 5 more matches

JS_NewContext
create a new jscontext. syntax jscontext * js_newcontext(jsruntime *rt, size_t stackchunksize); name type description rt jsruntime * parent runtime for the new context. javascript objects, functions, strings, and numbers may be shared among the contexts in a jsruntime, but they cannot be shared across jsruntimes. stackchunksize size_t the size, in bytes, of each "stack chunk". this is a memory management tuning parameter which most users should not adjust. 8192 is a good default value. description js_newcontext creates a new jscontext in the runtime rt. on success, it returns a pointer to the new context. otherwise it returns null. for more details about contexts, see jscontext. ...
...n bytes, of each "stack chunk". this is a memory management tuning parameter which most users should not adjust. 8192 is a good default value. description js_newcontext creates a new jscontext in the runtime rt. on success, it returns a pointer to the new context. otherwise it returns null. for more details about contexts, see jscontext. for sample code that creates and initializes a jscontext, see jsapi user guide. the stackchunksize parameter does not control the javascript stack size. (the jsapi does not provide a way to adjust the stack depth limit.) passing a large number for stackchunksize is a mistake. ...
... initializes a jscontext, see jsapi user guide. the stackchunksize parameter does not control the javascript stack size. (the jsapi does not provide a way to adjust the stack depth limit.) passing a large number for stackchunksize is a mistake. in a debug build, large chunk sizes can degrade performance dramatically. the usual value of 8192 is recommended. the application must call js_destroycontext when it is done using the context. before a jsruntime may be destroyed, all the jscontexts associated with it must be destroyed. the new jscontext initially has no global object. the new jscontext is associated with the calling thread. no other thread may use it or destroy it. ...
...And 4 more matches

AudioContext() - Web APIs
the audiocontext() constructor creates a new audiocontext object which represents an audio-processing graph, built from audio modules linked together, each represented by an audionode. syntax var audioctx = new audiocontext(); var audioctx = new audiocontext(options); parameters options optional an object based on the audiocontextoptions dictionary that contains zero or more optional properties to configure the new context. available properties are as follows: latencyhint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocon...
...es to configure the new context. available properties are as follows: latencyhint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate for the context's output device is used by default. return value the newly constructed audiocontext instance. exceptions n...
.... samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate for the context's output device is used by default. return value the newly constructed audiocontext instance. exceptions notsupportederror the specified samplerate isn't supported by the context. usage notes the specification doesn't go into a lot of detail about things like how many audio contexts a user agent should support, or minimum or maximum latency requirements (if any), so these details can vary from browser to browser. be sure to check the values if they matter to you. ...
...And 4 more matches

CanvasRenderingContext2D.addHitRegion() - Web APIs
canvas hit regions make hit detection easy. they let you route events to dom elements, and make it possible for users to explore the canvas without seeing it. syntax void ctx.addhitregion(options); options the options argument is optional. when provided, it is an object which can contain the following properties: path a path2d object describing the area of the hit region. if not provided, the current path is used. fillrule the algorithm by which to determine if a point is inside or outside the hit region. possible values: nonzero: the non-zero winding rule. default rule. evenodd: the even-odd winding rule. ...
...events, for example. parentid the id of the parent region for cursor fallback and navigation by accessibility tools. cursor the cursor to use when the mouse is over this region (defaults to inherit). inherits the cursor of the parent hit region, if any, or the canvas element's cursor. control an element (descendant of the canvas) to which events are to be routed. defaults to null. label a text label for accessibility tools to use as a description of the region, if there is no control. defaults to null. role an aria role for accessibility tools to determine how to represent this region, if there is no control. defaults to null. examples using the addhitregion method this example demonstrates the addhitregion() method. html <canvas id="canvas"></canvas> javascript const canvas...
...egion, if there is no control. defaults to null. role an aria role for accessibility tools to determine how to represent this region, if there is no control. defaults to null. examples using the addhitregion method this example demonstrates the addhitregion() method. ...
...And 4 more matches

CanvasRenderingContext2D.miterLimit - Web APIs
the canvasrenderingcontext2d.miterlimit property of the canvas 2d api sets the miter limit ratio. for more info about miters, see applying styles and color in the canvas tutorial. syntax ctx.miterlimit = value; options value a number specifying the miter limit ratio, in coordinate space units. zero, negative, infinity, and nan values are ignored. the default value is 10.0. examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information. ...
...gnored. the default value is 10.0. examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information. ...
... tutorial for more information. ...
...And 4 more matches

HTMLInputElement.setRangeText() - Web APIs
the htmlinputelement.setrangetext() method replaces a range of text in an <input> or <textarea> element with a new string. syntax element.setrangetext(replacement); element.setrangetext(replacement, start, end [, selectmode]); parameters replacement the string to insert. start optional the 0-based index of the first character to replace. defaults to the current selectionstart value (the start of the user's current selection). end optional the 0-based index of the character after the last character to replace. defaults to the current selectionend value (the end of the user's current selection). selectmode optional a string defining how the selection should be set after the text has been replaced. possible values: "select" selects the newly inserted text. "start"moves the se...
... end optional the 0-based index of the character after the last character to replace. defaults to the current selectionend value (the end of the user's current selection). selectmode optional a string defining how the selection should be set after the text has been replaced. possible values: "select" selects the newly inserted text. "start"moves the selection to just before the inserted text. "end" moves the selection to just after the inserted text. "preserve" attempts to preserve the selection. this is the default. ...
...ining how the selection should be set after the text has been replaced. possible values: "select" selects the newly inserted text. "start"moves the selection to just before the inserted text. "end" moves the selection to just after the inserted text. "preserve" attempts to preserve the selection. this is the default. example click the button in this example to replace part of the text in the text box. the newly inserted text will be highlighted (selected) afterwards. ...
...And 4 more matches

OES_texture_half_float_linear - Web APIs
the oes_texture_half_float_linear extension is part of the webgl api and allows linear filtering with half floating-point pixel types for textures. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. linear filtering the oes_texture_half_float extension alone does not allow linear filtering with half floating-point textures. this extension enables this ability. ...
...ng extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. linear filtering the oes_texture_half_float extension alone does not allow linear filtering with half floating-point textures. this extension enables this ability. with the help of this extension, you can now set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use half floating-point textures. ...
...near filtering with half floating-point textures. this extension enables this ability. with the help of this extension, you can now set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use half floating-point textures. ...
...And 4 more matches

OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
the ovr_multiview2.framebuffertexturemultiviewovr() method of the webgl api attaches a multiview texture to a webglframebuffer. syntax void ext.framebuffertexturemultiviewovr(target, attachment, texture, level, baseviewindex, numviews); parameters target a glenum specifying the binding point (target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. ...
...age of color, alpha, depth and stencil buffers used to render an image. gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. attachment a glenum specifying the attachment point for the texture. possible values: gl.color_attachment0: attaches the texture to the framebuffer's color buffer. gl.depth_attachment: attaches the texture to the framebuffer's depth buffer. gl.stencil_attachment: attaches the texture to the framebuffer's stencil buffer. gl.depth_stencil_attachment: depth and stencil buffer. gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6...
...must be 0. baseviewindex a glint specifying the base view index of the framebuffer object attachment. numviews a glsizei specifying the number of views of th...
...And 4 more matches

OffscreenCanvas.getContext() - Web APIs
the offscreencanvas.getcontext() method returns a drawing context for an offscreen canvas, or null if the context identifier is not supported. note: this api is currently implemented for webgl1 and webgl2 contexts only. see bug 801176 for canvas 2d api support from workers. syntax offscreen.getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context identifier defining the drawing context associated to the canvas. possible values are: "2d" creates a canvasrenderingcontext2d object representing a two-dimensional rendering context. "webgl" creates a webglrenderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 1 (opengl es 2.0). "we...
... the drawing context associated to the canvas. possible values are: "2d" creates a canvasrenderingcontext2d object representing a two-dimensional rendering context. "webgl" creates a webglrenderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 1 (opengl es 2.0). "webgl2" creates a webgl2renderingcontext object representing a three-dimensional rendering context. this context is only available on browsers that implement webgl version 2 (opengl es 3.0). "bitmaprenderer" creates a imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap. note: the identifiers "experimental-webgl" or "experimental-webgl2" are also used ...
...o replace the content of the canvas with a given imagebitmap. note: the identifiers "experimental-webgl" or "experimental-webgl2" are also used in implementations of webgl. these implementations have not reached test suite conformance, or the graphic drivers situation on the platform is not yet stable. the khronos group certifies webgl implementations under certain conformance rules. contextattributes you can use several context attributes when creating your rendering context, for example: offscreen.getcontext("webgl", { antialias: false, depth: false }); 2d context attributes: alpha: boolean that indicates if the canvas contains an alpha channel. if set to false, the browser now knows that the backdrop is always opaque, which can speed ...
...And 4 more matches

TextTrack.mode - Web APIs
the texttrack interface's mode property is a string specifying and controlling the text track's mode: disabled, hidden, or showing. you can read this value to determine the current mode, and you can change this value to switch modes. safari additionally requires the default boolean attribute to be set to true when implementing your own video player controls in order for the subtitles cues to be shown. syntax var mode = texttrack.mode; texttrack.mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the track's current mode. the text track mode is one of the values listed below, under text track mode constants. ...
...tionally requires the default boolean attribute to be set to true when implementing your own video player controls in order for the subtitles cues to be shown. syntax var mode = texttrack.mode; texttrack.mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the track's current mode. the text track mode is one of the values listed below, under text track mode constants. text track mode constants the text track mode—sometimes identified using the idl enum texttrackmode—must be one of the following values: disabled the text track is currently disabled. while the track's presence is exposed in the dom, the user agent is otherwise ignoring it. no cues are active, no events are being fired, and the user agent won't attempt to obtain the track's cues. this is the ...
... text track mode—sometimes identified using the idl enum texttrackmode—must be one of the following values: disabled the text track is currently disabled. while the track's presence is exposed in the dom, the user agent is otherwise ignoring it. no cues are active, no events are being fired, and the user agent won't attempt to obtain the track's cues. this is the default value, unless the text track has the default boolean attribute is specified, in which case the default is showing. hidden the text track is currently active but the cues aren't being displayed. if the user agent hasn't tried to obtain the track's cues yet, it will do so soon (thereby populating the track's texttrack.cues property). the user agent is keeping a list of the active cues (in the track's activecues propert...
...And 4 more matches

WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. syntax void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, glintptr offset); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlcanvaselement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlimageelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, htmlvideoelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagebitmap source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format,...
...possible values: gl.alpha: discards the red, green and blue compon...
...mat, type, imagedata source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview? srcdata); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. internalformat a glint specifying the color components in the texture. possible values: gl.alpha: discards the red, green and blue components and reads the alpha componen...
...And 4 more matches

WebGLRenderingContext.disable() - Web APIs
gl.dither deactivates dithering of color components before they get written to the color buffer. ...
... gl.dither deactivates dithering of color components before they get written to the color buffer. ...
...ties for this context. syntax void gl.disable(cap); parameters cap a glenum specifying which webgl capability to disable. possible values: constant description gl.blend deactivates blending of the computed fragment color values. see webglrenderingcontext.blendfunc(). gl.cull_face deactivates culling of polygons. see webglrenderingcontext.cullface(). gl.depth_test deactivates depth comparisons and updates to the depth buffer. see webglrenderingcontext.depthfunc(). gl.dither deactivates dithering of color components before they get written to the color buffer. gl.polygon_offset_fill deactivates adding an offset to depth values of polygon's fragments. ...
...And 4 more matches

WebGLRenderingContext.enable() - Web APIs
gl.dither activates dithering of color components before they get written to the color buffer. ...
... gl.dither activates dithering of color components before they get written to the color buffer. ...
...pabilities for this context. syntax void gl.enable(cap); parameters cap a glenum specifying which webgl capability to enable. possible values: constant description gl.blend activates blending of the computed fragment color values. see webglrenderingcontext.blendfunc(). gl.cull_face activates culling of polygons. see webglrenderingcontext.cullface(). gl.depth_test activates depth comparisons and updates to the depth buffer. see webglrenderingcontext.depthfunc(). gl.dither activates dithering of color components before they get written to the color buffer. gl.polygon_offset_fill activates adding an offset to depth values of polygon's fragments. ...
...And 4 more matches

-moz-context-properties - CSS: Cascading Style Sheets
the -moz-context-properties property can be used within privileged contexts in firefox to share the values of specified properties of the element with a child svg image. if you reference an svg image in a webpage (such as with the <img> element or as a background image), the svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value. ...
... stroke expose the stroke value set on the image to the embedded svg. ...
...ge adopt property values set on the embedding element. to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value. syntax /* keyword values */ -moz-context-properties: fill; -moz-context-properties: fill, stroke; /* global values */ -moz-context-properties: inherit; -moz-context-properties: initial; -moz-context-properties: unset; values fill expose the fill value set on the image to the embedded svg. stroke expose the stroke value set on the image to the embedded svg. fill-opacity expose the fill-opacity value set on the image to the embedded svg. stroke-opacity exp...
...And 4 more matches

text-justify - CSS: Cascading Style Sheets
the text-justify css property sets what type of justification should be applied to text when text-align: justify; is set on an element. text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* deprecated value */ syntax the text-justify property is specified as a single keyword chosen from the list of values below. values none the text justification is turned off. this has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason. ...
...low. values none the text justification is turned off. this has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason. auto the browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., english, cjk languages, etc.). this is the default justification used if text-justify is not set at all. inter-word the text is justified by adding space between words (effectively varying word-spacing), which is most appropriate for languages that separate words using spaces, like english or korean. ...
... distribute exhibits the same behaviour as inter-character; this value is kept for backwards compatibility. ...
...And 4 more matches

The HTML autocomplete attribute - HTML: Hypertext Markup Language
autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. the source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. for instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. ...
...values come from past values entered by the user, but they may also come from pre-configured values. for instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure. if an <input>, <select> or <textarea> element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the element is a descendant of, or the <form> whose id is specified by the form attribute of the element. for more information, see the autocomplete attribute in <form>. in order to provide autocompletion, user-agents might require <input...
...t has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the element is a descendant of, or the <form> whose id is specified by the form attribute of the element. for more information, see the autocomplete attribute in <form>. in order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to: have a name and/or id attribute be descendants of a <form> element the form to have a submit button values "off" the browser is not permitted to automatically enter or select a value for this field. it is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically enter...
...And 4 more matches

<col> - HTML: Hypertext Markup Language
ference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. ...
...he cell justify, inserting spaces into the textual content so that the content is justified in the cell if this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. if there are none, the left value is assumed. note: to achieve the same effect as the left, center, right or justify values: do not try to set the text-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector. set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) { text-align: right; } to right-align the second column. if the table does use a...
...ls in a column on. typical values for this include a period (.) when attempting to align numbers or monetary values. if align is not set to char, this attribute is ignored. charoff this attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute. ...
...And 4 more matches

<input type="color"> - HTML: Hypertext Markup Language
<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format. only simple colors (without alpha channel) are allowed though css colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel. the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window. the source for this interactive example is stored in a github repository. if you'd like to...
...e value. this makes sense when you keep in mind that html and css are separate languages and specifications. in addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. #009900aa) will also result in the color being set to #000000. note: any web browser that doesn't support an input of type color will naturally fall back to the type text. because users can write colors in many different ways (such as rgb(255, 255, 0)), one way to work around this is to set a pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different result with just a letter-case change) and set a placeholder attribute equal to a color representing the expected format of the user's input,...
...if the browser instead uses a color well, select() does nothing. you should be aware of this behavior so your code can respond appropriately in either case. colorwell.select(); appearance variations as previously mentioned, when a browser doesn't support a color picker ...
...And 4 more matches

<input type="month"> - HTML: Hypertext Markup Language
ase clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected. for those of you using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera. clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. the microsoft edge month control looks like this: ...
... type, and so forth). handling browser support as mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only chrome/opera and edge support it on desktop, and most modern browsers on mobile. ...
...for example: mmyyyy (072018) mm/yyyy (07/2018) mm-yyyy (07-2018) yyyy-mm (2018-07) month yyyy (july 2018) ... and so forth. one way around this is to put a pattern attribute on your month input. ...
...And 4 more matches

Features restricted to secure contexts - Web security
this reference lists the web platform features available only in secure contexts — see secure contexts for a definition and more details. current features available only in secure contexts this section lists all the apis available only in secure contexts, along with browser versions the limitation was introduced in, as appropriate. note: only the browsers that actually support secure contexts are listed in this document. see here for information on secure contexts support. api chrome/opera edge safari firefox async clipboard api 66 not supported not supported 63 background sync (see syncmanager, for example) 49 not supported not supported not supported cache-control: immutable not supported 15 ...
...torage api 55 not supported not supported 51 web authentication api 65 in preview (17) in development 60 web bluetooth 56 not supported not supported not supported web midi (see midiaccess, for example) 43 not supported not supported not supported web crypto api 60 79 not supported 75 secure context restrictions that vary by browser some browsers may decide to disable certain apis in non-secure contexts or apply other restrictions/security measures, despite the spec not requiring them. this section lists any such differences existing in browsers. api chrome edge safari firefox application cache restricted to secure contexts planned in chrome 70 depre...
...er restrictions/security measures, despite the spec not requiring them. this section lists any such differences existing in browsers. ...
...And 4 more matches

-ms-text-autospace - Archive of obsolete content
ideograph-parenthesis creates extra spacing between a normal (non-wide) parenthesis and an ideograph. ...
... ideograph-parenthesis creates extra spacing between a normal (non-wide) parenthesis and an ideograph. ...
... ideograph-parenthesis creates extra spacing between a normal (non-wide) parenthesis and an ideograph. ...
...And 3 more matches

Styling text - Learn web development
we round off the module by looking at applying custom fonts to your page, and styling lists and links. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
...we round off the module by looking at applying custom fonts to your page, and styling lists and links. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
...ss fundamentals, as discussed in introduction to css. note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin, codepen or glitch. ...
...And 3 more matches

JS_DestroyContext
destroy a jscontext. syntax void js_destroycontext(jscontext *cx); void js_destroycontextnogc(jscontext *cx); void js_destroycontextmaybegc(jscontext *cx); // obsolete since jsapi 14 name type description cx jscontext * the context to destroy. description these functions destroy a context, cx. js_destroycontext additionally performs garbage collection to reclaim any memory that was being used by cx's global object. js_destroycontextnogc does not perform garbage collection. js_destroycontextmaybegc may or may not perform garbage collection; the engine makes an educated guess as to whether enough memory would be reclaimed to justify the work. in a js_threadsafe build, it does not matter whether the calling thread is in a request on cx. however...
...ject. js_destroycontextnogc does not perform garbage collection. js_destroycontextmaybegc may or may not perform garbage collection; the engine makes an educated guess as to whether enough memory would be reclaimed to justify the work. in a js_threadsafe build, it does not matter whether the calling thread is in a request on cx. however, there must not be any suspended requests on cx. if js_setcontextcallback has been called, this calls the callback. ...
...may not perform garbage collection; the engine makes an educated guess as to whether enough memory would be reclaimed to justify the work. in a js_threadsafe build, it does not matter whether the calling thread is in a request on cx. ...
...And 3 more matches

JS_GetContextPrivate
access a jscontext field for application-specific data. syntax void * js_getcontextprivate(jscontext *cx); void js_setcontextprivate(jscontext *cx, void *data); void * js_getsecondcontextprivate(jscontext *cx); // added in spidermonkey 17 void js_setsecondcontextprivate(jscontext *cx, void *data); // added in spidermonkey 17 name type description cx jscontext * any context. data void * (in js_setcontextprivate or js_setsecondcontextprivate) pointer to application-defined data to be associated with the context cx. description each jscontext has two fields of type void * which the application may use for any purpose. they are especially useful for storing data needed by callbacks. ...
... description cx jscontext * any context. data void * (in js_setcontextprivate or js_setsecondcontextprivate) pointer to application-defined data to be associated with the context cx. description each jscontext has two fields of type void * which the application may use for any purpose. they are especially useful for storing data needed by callbacks. js_getcontextprivate and js_getsecondcontextprivate get this field and js_setcontextprivate and js_setsecondcontextprivate set it. the field is initially null. memory management for this private data is the application's responsibility. the javascript engine itself never uses it. ...
...or any purpose. they are especially useful for storing data needed by callbacks. js_getcontextprivate and js_getsecondcontextprivate get this field and js_setcontextprivate and js_setsecondcontextprivate set it. the field is initially null. memory management for this private data is the application's responsibility. the javascript engine itself never uses it. ...
...And 3 more matches

nsIFeedTextConstruct
toolkit/components/feeds/public/nsifeedtextconstruct.idlscriptable this interface represents rss or atom feed text fields that may contain plain text, html, or xhtml. some extension elements also include "type" parameters, and this interface could be used to represent those as well. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-textconstruct;1, but users usually don't need to create instances of this directly. various other feed-related interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct. method overview nsidomdocumentfragment createdocumentfragment(in ns...
...plemented by: @mozilla.org/feed-textconstruct;1, but users usually don't need to create instances of this directly. various other feed-related interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct. method overview nsidomdocumentfragment createdocumentfragment(in nsidomelement element); astring plaintext(); attributes attribute type description base nsiuri if the text construct contains html or xhtml, relative references in the content should be resolved against this base uri. lang astring the language of the text (such as "en-us" for u.s. english). text astring the actual text content. this string may contain markup if the type ...
... nsidomdocumentfragment createdocumentfragment( in nsidomelement element ); parameters element the element in which to create the new document fragment. ...
...And 3 more matches

nsITextInputProcessorCallback
this interface has a "function" attribute. therefore, js-ime can implement this as a function. ...
...this interface has a "function" attribute. therefore, js-ime can implement this as a function. ...
...this interface has a "function" attribute. therefore, js-ime can implement this as a function. ...
...And 3 more matches

AudioContext.createJavaScriptNode() - Web APIs
see also scriptprocessornode. syntax var jsnode = audioctx.createjavascriptnode(buffersize, numinputchannels, numoutputchannels); parameters buffersize the buffer size must be in units of sample frames, i.e., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384. it controls the frequency of callbacks asking for a buffer refill. smaller sizes allow for lower latency and higher for better overall quality. numinputchannels the number of input channels in the audio stream. ...
...r 16384. it controls the frequency of callbacks asking for a buffer refill. smaller sizes allow for lower latency and higher for better overall quality. numinputchannels the number of input channels in the audio stream. numoutputchannels the number of output channels in the audio stream. ...
...smaller sizes allow for lower latency and higher for better overall quality. numinputchannels the number of input channels in the audio stream. numoutputchannels the number of output channels in the audio stream. ...
...And 3 more matches

AudioContext.getOutputTimestamp() - Web APIs
the getoutputtimestamp() property of the audiocontext interface returns a new audiotimestamp object containing two audio timestamp values relating to the current audio context. the two values are as follows: audiotimestamp.contexttime: the time of the sample frame currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as the context's audiocontext.currenttime. basically, this is the time after the audio context was first created. audiotimestamp.performancetime: an estimation of the moment when the sample frame corresponding to the stored contexttime value was rendered by the audio output device, in the same units and origin as performance.now(). ...
...igin as the context's audiocontext.currenttime. basically, this is the time after the audio context was first created. audiotimestamp.performancetime: an estimation of the moment when the sample frame corresponding to the stored contexttime value was rendered by the audio output device, in the same units and origin as performance.now(). this is the time after the document containing the audio context was first rendered. syntax var timestamp = audiocontext.getoutputtimestamp() parameters none. returns an audiotimestamp object, which has the following properties. contexttime: a point in the time coordinate system of the currenttime for the baseaudiocontext; the time after the audio context was first created. performancetime: a point in the time coordinate system of a performance inte...
....getoutputtimestamp() parameters none. returns an audiotimestamp object, which has the following properties. contexttime: a point in the time coordinate system of the currenttime for the baseaudiocontext; the time after the audio context was first created. performancetime: a point in the time coordinate system of a performance interface; the time after the document containing the audio context was first rendered examples in the following code we start to play an audio file after a play button is clicked, and start off a requestanimationframe loop running, which constantly outputs the contexttime and performancetime. you can see full code of this example at output-timestamp (see it live also). play.addeventlistener('click', () => { if(!audioctx) { audioctx = new window.audioc...
...And 3 more matches

BaseAudioContext.createPanner() - Web APIs
syntax baseaudioctx.createpanner(); returns a pannernode. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
... syntax baseaudioctx.createpanner(); returns a pannernode. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...x) for setting position, etc. if it supports those, or older methods (like audiolistener.setorientation()) if it still supports those but not the new properties. ...
...And 3 more matches

BaseAudioContext.currentTime - Web APIs
console.log(audioctx.currenttime); reduced time precision to offer protection against timing attacks and fingerprinting, the precision of audioctx.currenttime might get rounded depending on browser settings. ...
... console.log(audioctx.currenttime); reduced time precision to offer protection against timing attacks and fingerprinting, the precision of audioctx.currenttime might get rounded depending on browser settings. ...
... console.log(audioctx.currenttime); reduced time precision to offer protection against timing attacks and fingerprinting, the precision of audioctx.currenttime might get rounded depending on browser settings. ...
...And 3 more matches

Body.text() - Web APIs
the text() method of the body mixin takes a response stream and reads it to completion. it returns a promise that resolves with a usvstring object (text). the response is always decoded using utf-8. syntax response.text().then(function (text) { // do something with the text response }); parameters none. return value a promise that resolves with a usvstring. example in our fetch text example (run fetch text live), we have an <article> element and three links (stored in the mylinks array.) first, we loop through all of these and give each one an onclick event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked. when getdata() is run, we create a new request using the request() construc...
... first, we loop through all of these and give each one an onclick event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked. when getdata() is run, we create a new request using the request() constructor, then use it to fetch a specific .txt file. when the fetch is successful, we read a usvstring (text) object out of the response using text(), then set the innerhtml of the <article> element equal to the text object. let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata...
... living standard ...
...And 3 more matches

CanvasRenderingContext2D.isPointInPath() - Web APIs
fillrule the algorithm by which to determine if a point is inside or outside the path. possible values: "nonzero": the non-zero winding rule. default rule. "evenodd": the even-odd winding rule. path a path2d path to check against. if unspecified, the current path is used. ...
... fillrule the algorithm by which to determine if a point is inside or outside the path. possible values: "nonzero": the non-zero winding rule. default rule. "evenodd": the even-odd winding rule. path a path2d path to check against. if unspecified, the current path is used. ...
... fillrule the algorithm by which to determine if a point is inside or outside the path. ...
...And 3 more matches

CanvasRenderingContext2D.setTransform() - Web APIs
note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one. syntax ctx.settransform(a, b, c, d, e, f); ctx.settransform(matrix); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settransform() has two types of parameter that it can accept. ...
...trix to set (technically, a dommatrixinit object; any object will do as long as it contains the above components as properties). examples skewing a shape this example skews a rectangle both vertically (.2) and horizontally (.8). scaling and translation remain unchanged. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements. we apply a transform to the first one's context using the first type of settransform() and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.gettransform(). we then apply the ...
....fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements. we apply a transform to the first one's context using the first type of settransform() and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.gettransform(). we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform() (i.e. the second type), and draw a circle on it. ...
...And 3 more matches

Clipboard.writeText() - Web APIs
return value a promise which is resolved once the clipboard's contents have been updated. ...
... return value a promise which is resolved once the clipboard's contents have been updated. ...
... return value a promise which is resolved once the clipboard's contents have been updated. ...
...And 3 more matches

HTMLElement.contextMenu - Web APIs
the htmlelement.contextmenu property refers to the context menu assigned to an element using the contextmenu attribute. the menu itself is created using the <menu> element. ...
... the htmlelement.contextmenu property refers to the context menu assigned to an element using the contextmenu attribute. the menu itself is created using the <menu> element. ...
... the htmlelement.contextmenu property refers to the context menu assigned to an element using the contextmenu attribute. the menu itself is created using the <menu> element. ...
...And 3 more matches

HTMLMedia​Element​.textTracks - Web APIs
you can detect when tracks are added to and removed from an <audio> or <video> element using the addtrack and removetrack events. however, these events aren't sent directly to the media element itself. instead, they're sent to the track list object of the htmlmediaelement that corresponds to the type of track that was added to the element the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. ...
...rectly to the media element itself. instead, they're sent to the track list object of the htmlmediaelement that corresponds to the type of track that was added to the element the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. once you have a reference to the list, you can monitor it for changes to detect when new text tracks are added or existing ones removed. see event handlers in texttracklist to learn more about watching for changes to a media element's track list. syntax var texttracks = mediaelement.texttracks; value a texttracklist object representing the list of text tracks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid()...
...d. see event handlers in texttracklist to learn more about watching for changes to a media element's track list. syntax var texttracks = mediaelement.texttracks; value a texttracklist object representing the list of text tracks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. examples we start with a <video> that has several <track> children <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> ...
...And 3 more matches

ImageBitmapRenderingContext - Web APIs
ownership of the imagebitmap is transferred to the canvas. this was previously named transferimagebitmap(), but was renamed in a spec change. the old name is being kept as an alias to avoid code breakage. ...
...ownership of the imagebitmap is transferred to the canvas. this was previously named transferimagebitmap(), but was renamed in a spec change. the old name is being kept as an alias to avoid code breakage. ...
...ownership of the imagebitmap is transferred to the canvas. this was previously named transferimagebitmap(), but was renamed in a spec change. the old name is being kept as an alias to avoid code breakage. ...
...And 3 more matches

OES_texture_float_linear - Web APIs
the oes_texture_float_linear extension is part of the webgl api and allows linear filtering with floating-point pixel types for textures. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. linear filtering the oes_texture_float extension alone does not allow linear filtering with floating-point textures. this extension enables this ability. ...
...e also using extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. linear filtering the oes_texture_float extension alone does not allow linear filtering with floating-point textures. this extension enables this ability. with the help of this extension, you can now set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use floating-point textures. ...
...on alone does not allow linear filtering with floating-point textures. this extension enables this ability. with the help of this extension, you can now set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use floating-point textures. ...
...And 3 more matches

TextEncoder - Web APIs
textencoder takes a stream of code points as input and emits a stream of utf-8 bytes. note: there is a polyfill implementation to support non-utf-8 text encodings on github. example const encoder = new textencoder() const view = encoder.encode('€') console.log(view); // uint8array(3) [226, 130, 172] constructor textencoder() returns a newly constructed textencoder that will generate a byte stream with utf-8 encoding. properties the textencoder interface doesn't inherit any property. textencoder.prototype.encodingread only always returns "utf-8". methods the textencoder interface doesn't inherit any method. textencoder.prototype.encode() takes a usvstring as input, and returns a uint8array containing utf-8 encoded text. ...
...this is potentially more performant than the older encode() method. polyfill the below polyfill is compliant with the standard and therefore only supports utf-8. ...
...this is potentially more performant than the older encode() method. polyfill the below polyfill is compliant with the standard and therefore only supports utf-8. it is designed to work in ie5 "out of the box". however, in ie5-ie9, it will return a regular array instead of a typedarray. ...
...And 3 more matches

WebGLContextEvent - Web APIs
the webcontextevent interface is part of the webgl api and is an interface for an event that is generated in response to a status change to the webgl rendering context. inheritance this interface inherits properties and methods from its parent interface, event. ...
...nline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event. ...
...And 3 more matches

WebGLTexture - Web APIs
the webgltexture interface is part of the webgl api and represents an opaque texture object providing storage and state for texturing operations. description the webgltexture object does not define any methods or properties of its own and its content is not directly accessible. ...
... the webgltexture interface is part of the webgl api and represents an opaque texture object providing storage and state for texturing operations. description the webgltexture object does not define any methods or properties of its own and its content is not directly accessible. ...
... the webgltexture interface is part of the webgl api and represents an opaque texture object providing storage and state for texturing operations. description the webgltexture object does not define any methods or properties of its own and its content is not directly accessible. ...
...And 3 more matches

Using the aria-valuetext attribute - Accessibility
the aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider. authors should only set the aria-valuetext attribute when the rendered value cannot be accurately represented as a number. for example, a slider may have rendered values of small, medium, and large. in this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but thearia-valuetext would be one of the strings: small, medium, or large. ...
...xample, a slider may have rendered values of small, medium, and large. in this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but thearia-valuetext would be one of the strings: small, medium, or large. value string representation of a number possible effects on user agents and assistive technology if the aria-valuetext attribute is absent, assistive technologies will rely solely on the aria-valuenow attribute for the current value. if aria-valuetext is specified, assistive technologies should render that value instead of the value of aria-valuenow. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normat...
...e technologies should render that value instead of the value of aria-valuenow. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider for selecting a day of the week. ...
...And 3 more matches

Stacking context example 1 - CSS: Cascading Style Sheets
without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. then if div #4 is also assigned a positive z-index greater than div #2's z-index, it is rendered above all the other divs including div #2. ...
...without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. then if div #4 is also assigned a positive z-index greater than div #2's z-index, it is rendered above all the other divs including div #2. ...
...without z-indexes, elements are stacked in order of occurrence. if div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other divs. then if div #4 is also assigned a positive z-index greater than div #2's z-index, it is rendered above all the other divs including div #2. ...
...And 3 more matches

Inline formatting context - CSS: Cascading Style Sheets
the boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically. ...
...endering of a web page. inline boxes are laid out one after the other, in the direction sentences run in the writing mode in use: in a horizontal writing mode, boxes are laid out horizontally, starting on the left. in a vertical writing mode they would be laid out vertically starting at the top. in the example below, the two (<div>) elements with the black borders form a block formatting context, inside which each word participates in an inline formatting context. the boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically. boxes forming a line are contained by a rectangular area called a line box. this box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another l...
... border on the <span> breaks at the wrapping point. margins, borders, and padding in the inline direction are respected. in the example below you can see how the margin, border, and padding on the inline <span> element are added. ...
...And 3 more matches

text-align-last - CSS: Cascading Style Sheets
the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 3 more matches

text-combine-upright - CSS: Cascading Style Sheets
the text-combine-upright css property sets the combination of characters into the space of a single character. if the combined text is wider than 1em, the user agent must fit the contents within 1em. the resulting composition is treated as a single upright glyph for layout and decoration. this property only has an effect in vertical writing modes. this is used to produce an effect that is known as tate-chū-yoko (縦中横) in japanese, or as 直書橫向 in chinese. ...
...ngle character. if the combined text is wider than 1em, the user agent must fit the contents within 1em. the resulting composition is treated as a single upright glyph for layout and decoration. this property only has an effect in vertical writing modes. this is used to produce an effect that is known as tate-chū-yoko (縦中横) in japanese, or as 直書橫向 in chinese. ...
...ned text is wider than 1em, the user agent must fit the contents within 1em. the resulting composition is treated as a single upright glyph for layout and decoration. this property only has an effect in vertical writing modes. this is used to produce an effect that is known as tate-chū-yoko (縦中横) in japanese, or as 直書橫向 in chinese. ...
...And 3 more matches

text-indent - CSS: Cascading Style Sheets
the text-indent css property sets the length of empty space (indentation) that is put before lines of text in a block. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>. negative val...
...ngth-percentage> = <length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { ...
...And 3 more matches

HTML attribute: pattern - HTML: Hypertext Markup Language
the pattern attribute specifies a regular expression the form control's value should match. if a non-null value doesn't conform to the constraints set by the pattern value, the validitystate object's read-only patternmismatch property will be true. the pattern attribute is an attribute of the text, tel, email, url, password, and search input types. the pattern attribute, when specified, is a regular expression which the input's value must match in order for the value to pass constraint validation. it must be a valid javascript regular expression, as used by the regexp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii. ...
...in order for the value to pass constraint validation. it must be a valid javascript regular expression, as used by the regexp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of unicode code points, instead of as ascii. no forward slashes should be specified around the pattern text. if the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored. tip: use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. you should also include other explanatory text nearby. some of the input types supporting the pattern attribute, notably t...
... types supporting the pattern attribute, notably the email and url input types, have expected value syntaxes that must be matched. if the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the validitystate object's read-only typemismatch property will be true. usability when including a pattern, provide a description of the pattern in visible text near the control. additionally, include a title attribute which gives a description of the pattern. user agents may use the title contents during constraint validation to tell the user that the pattern is not matched. some browsers show a tooltip with title contents, improving usability for sighted users. additionally, assistive technology may read the title aloud when the control gains focus, bu...
...And 3 more matches

HTML attribute: required - HTML: Hypertext Markup Language
if present on any of these input types and elements, the :required pseudo class will match. if the attribute is not included, the :optional pseudo class will match. ...
...if present on any of these input types and elements, the :required pseudo class will match. if the attribute is not included, the :optional pseudo class will match. ...
...at an element (any element) is required, but has no bearing on the optionality of the element. attribute interactions because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. usability when including the required attribute, provide a visible indication near the control informing the user that the input, select or textarea is required. in addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. this improves usability for sited user. assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does no...
...And 3 more matches

<b>: The Bring Attention To element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...
...And 3 more matches

<dfn>: The Definition element - HTML: Hypertext Markup Language
the <p> element, the <dt>/<dd> pairing, or the <section> element which is the nearest ancestor of the <dfn> is considered to be the definition of the term. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content, but no <dfn> element must be a descendant. ...
...ibute has special meaning, as noted below. usage notes there are some not-entirely-obvious aspects to using the <dfn> element. we examine those here. specifying the term being defined the term being defined is identified following these rules: if the <dfn> element has a title attribute, the value of the title attribute is considered to be the term being defined. ...
..., as noted below. usage notes there are some not-entirely-obvious aspects to using the <dfn> element. we examine those here. specifying the term being defined the term being defined is identified following these rules: if the <dfn> element has a title attribute, the value of the title attribute is considered to be the term being defined. the element must still have text within it, but that text may be an abbreviation (perhaps using <abbr>) or another form of the term. if the <dfn> contains a single child element and does not have any text content of its own, and the child element is an <abbr> element with a title attribute itself, then the exact value of the <abbr> element's title is the term being defined. otherwise, the text content of the <dfn> element is the term being defined. th...
...And 3 more matches

<em>: The Emphasis element - HTML: Hypertext Markup Language
the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
... implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element only includes the global attributes. ...
... <i> vs. <em> new developers are often confused at seeing multiple elements that produce similar results. ...
...And 3 more matches

<input type="hidden"> - HTML: Hypertext Markup Language
onstraint validation; they have no real value to be constrained. examples let's look at how we might implement a simple version of the edit form we described earlier (see tracking edited content), using a hidden input to remember the id of the record being edited. ...
...f the edit form we described earlier (see tracking edited content), using a hidden input to remember the id of the record being edited. the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post. ...
...ted. the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post. ...
...And 3 more matches

<input type="number"> - HTML: Hypertext Markup Language
ase and decrease the value using their mouse or by simply tapping with a fingertip. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. on browsers that don't support inputs of type number, a number input falls back to type text. value any floating-point number, or empty. events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty. you can set a default value for the input by including a number insi...
...at isn't a valid number, the input has no minimum value. this value must be less than or equal to the value of the max attribute. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. ...
... note: avoid using the placeholder attribute if you can. it is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. see labels and placeholders in <input>: the input (form input) element for more information. ...
...And 3 more matches

<input type="week"> - HTML: Hypertext Markup Language
he interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. in non-supporting browsers, the control degrades gracefully to function identically to <input type="text">. in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button to clear the control's value. the edge week control is somewhat more elaborate, opening up week and year pickers with sliding reels. value a domstring representing a week and year, or empty events change and ...
...t: safari and firefox don't support it on desktop, and old versions of ie don't support it. mobile platforms such as android and ios make really good use of such input types, providing specialist ui controls that make it really easy to select values in a touchscreen environment. ...
...there are multiple ways in which people could write week values; for example: week 1 2017 jan 2-8 2017 2017-w01 etc. ...
...And 3 more matches

<p>: The Paragraph element - HTML: Hypertext Markup Language
paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. see “tag omission” below. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... permitted parents any element that accepts flow content. implicit aria role no corresponding role permitted aria roles any dom interface htmlparagraphelement attributes this element only includes the global attributes. note: the align attribute on <p> tags is obsolete and shouldn't be used. example html <p>this is the first paragraph of text. this is the first paragraph of text. this is the first paragraph of text. this is the first paragraph of text.</p> <p>this is the second paragraph. this is the second paragraph. this is the second paragraph. this is the second paragraph.</p> result styling paragraphs by default, browsers separate paragraphs with a single blank line. alternate separation methods, such as first-l...
...uch as school papers and rough drafts, uses both blank lines and indentation for separation. in finished works, combining both is considered redundant and amateurish.</p> <p>in very old writing, paragraphs were separated with a special character: ¶, the <i>pilcrow</i>. ...
...And 3 more matches

<samp>: The Sample Output element - HTML: Hypertext Markup Language
its contents are typically rendered using the browser's default monospaced font (such as courier or lucida console). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
...ace would look like this: samp { font-family: "courier"; } if you need an element which will serve as a container for output generated by your website or app's javascript code, you should instead use the <output> element. examples basic example in this simple example, a paragraph includes an example of the output of a program. ...
...example, a paragraph includes an example of the output of a program. <p>when the process is complete, the utility will output the text <samp>scan complete. found <em>n</em> results.</samp> you can then proceed to the next step.</p> the resulting output looks like this: sample output including user input you can nest the <kbd> element within a <samp> block to present an example that includes text entered by the user. ...
...And 3 more matches

<th> - HTML: Hypertext Markup Language
when this attribute is not specified is auto. deprecated attributes align obsolete since html5 this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. center: the content is centered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes. the default value when this attribute is not specified is left. note: do not use this attribute as it is obsolete in the latest standar...
...unimplemented in css3. axis obsolete since html5 this attribute contains a list of space-separated strings. each string is the id of a group of cells that this header applies to. ...
...unimplemented in css3. ...
...And 3 more matches

Using the application cache - HTML: Hypertext Markup Language
ad faster. reduced server load the browser only downloads resources that have changed from the server. how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that lists urls that browsers should cache for your application. you should include the manifest attribute on each page of your site that you want cached. the browser does not cache pages without the manifest attribute, unless such pages are listed in the manifest file. you do not need to list all pages you want cached in the manifest file, the browser implicitly adds every page that the us...
...t. this sets the application cache's state to obsolete. the cache manifest file referencing a cache manifest file the manifest attribute in a web application can specify either the relative path of a cache manifest file or an absolute url. (absolute urls must be from the same origin as the application). a cache manifest file can have any file extension, but it must be served with the mime type text/cache-manifest. note: on apache servers, the mime type for manifest (.appcache) files can be set by adding addtype text/cache-manifest .appcache to a .htaccess file within either the root directory, or the same directory as the application. entries in a cache manifest file the cache manifest file is a simple text file that lists the resources the browser should cache for offline access. resour...
...ml # fallback content fallback: . fallback.html this example uses network and fallback sections to specify that the network.html page must always be retrieved from the network, and that the fallback.html page should be served as a fallback resource (e.g., in case a connection to the server cannot be established). structure of a cache manifest file cache manifest files must be served with the text/cache-manifest mime type. all resources served using this mime type must follow the syntax for an application cache manifest, as defined in this section. cache manifests are utf-8 format text files, and may optionally include a bom character. newlines may be represented by line feed (u+000a), carriage return (u+000d), or carriage return and line feed both. the first line of the cache manifest m...
...And 3 more matches

<xsl:text> - XSLT: Extensible Stylesheet Language Transformations
to output html-entities, use numerical values instead, eg &#160; for &nbsp;) specifies whether special characters are escaped when written to the output. ...
...to output html-entities, use numerical values instead, eg &#160; for &nbsp;) specifies whether special characters are escaped when written to the output. ...
...to output html-entities, use numerical values instead, eg &#160; for &nbsp;) specifies whether special characters are escaped when written to the output. ...
...And 3 more matches

io/text-streams - Archive of obsolete content
experimental provides streams for reading and writing text. function readtextfromfile(filename) { var fileio = require("sdk/io/file"); var text = null; if (fileio.exists(filename)) { var textreader = fileio.open(filename, "r"); if (!textreader.closed) { text = textreader.read(); textreader.close(); } } return text; } function writetexttofile(text, filename) { var fileio = require("sdk/io/file"); var textwriter = fileio.open(filename, "w"); if (!textwriter.closed) { textwriter.write(text); textwriter.close(); } } globals constructors textreader(inputstream, charset) creates a buffered input stream that reads text from a backing stream using a given text encoding. you can also create textreader objects using io/file's open() function. ...
...so create textreader objects using io/file's open() function. parameters inputstream : stream the backing stream, an nsiinputstream. it must already be opened. charset : string inputstream is expected to be in the character encoding named by this value. if not specified, "utf-8" is assumed. see nsicharsetconvertermanager.idl for documentation on how to determine other valid values for this. textwriter(outputstream, charset) creates a buffered output stream that writes text to a backing stream using a given text encoding. you can also create textwriter objects using io/file's open() function. parameters outputstream : stream the backing stream, an nsioutputstream. it must already be opened. ...
...dl for documentation on how to determine other valid values for this. textwriter(outputstream, charset) creates a buffered output stream that writes text to a backing stream using a given text encoding. you can also create textwriter objects using io/file's open() function. parameters outputstream : stream the backing stream, an nsioutputstream. it must already be opened. charset : string text will be written to outputstream using the character encoding named by this value. if not specified, "utf-8" is assumed. see nsicharsetconvertermanager.idl for documentation on how to determine other valid values for this. textreader methods close() closes both the stream and its backing stream. read(numchars) reads and returns a string from the stream. if the stream is closed, an exception ...
...And 2 more matches

Offering a context menu for form controls - Archive of obsolete content
firefox 3 changed the behavior of right-click on form controls to no longer display a context menu by default. this article describes how an extension can override this change in a particular window, enabling context menus to work on form controls. this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. ...
...hsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls. <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. window.addeventlistener("load", function() { let settargetor...
... xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls. ...
...And 2 more matches

textnode - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] normally when substituting rdf resources in template rules, you place the rdf property name inside an attribute value preceded with rdf:. in the case of the textnode element, the entire node is replaced with text corresponding to the result of the value attribute. this is useful if you want to use the html element or other elements that have text content inside them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). inherited from xul element align, allowevents, allownegativeassertions, class, coalesce...
...t inside them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...And 2 more matches

Rhino scopes and contexts
before using rhino in a concurrent environment, it is important to understand the distinction between contexts and scopes. both are required to execute scripts, but they play different roles. simple embeddings of rhino probably won't need any of the information here, but more complicated embeddings can gain performance and flexibility from the techniques described below. contexts the rhino context object is used to store thread-specific information about the execution environment. there should be one and only one context associated with each thread that will be executing javascript. ...
...eed any of the information here, but more complicated embeddings can gain performance and flexibility from the techniques described below. contexts the rhino context object is used to store thread-specific information about the execution environment. there should be one and only one context associated with each thread that will be executing javascript. to associate the current thread with a context, simply call the enter method of context: context cx = context.enter(); once you are done with execution, simply exit the context: context.exit(); these calls will work properly even if there is already a context associated with the current thread. that context will be returned and an internal counter incremented. only when the counter reaches zero will it be disassociated from the thread. ...
...sassociated from the thread. remember to put the exit() call in a finally block if you're executing code that could throw an exception. scopes a scope is a set of javascript objects. execution of scripts requires a scope for top-level script variable storage as well as a place to find standard objects like function and object. it's important to understand that a scope is independent of the context that created it. you can create a scope using one context and then evaluate a script using that scope and another context (either by exiting the current context and entering another, or by executing on a different thread). you can even execute scripts on multiple threads simultaneously in the same scope. rhino guarantees that accesses to properties of javascript objects are atomic across threads,...
...And 2 more matches

nsIAccessibleHyperText
read only. ...
...read only. ...
...read only. ...
...And 2 more matches

nsITextInputProcessorNotification
attributes attribute type description type acstring the type of request or notification to ime. see type values below. types "request-to-commit" this is required to be handled. ...
...essorcallback.idlscriptable this interface of a request or notification to ime 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface tells details of a request or notification to ime. when gecko supports new notification to ime, this interface may have some new attributes. ...
... if the callback doesn't want to commit the composition synchronously, it's okay to commit it later (i.e., asynchronously). however, gecko will commit the composition with the last composing string internally. ...
...And 2 more matches

AudioContext.createMediaElementSource() - Web APIs
returns a mediaelementaudiosourcenode. ...
... returns a mediaelementaudiosourcenode. ...
...yback. when the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall window height. you can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down. note: you can also view this example running live, or view the source. ...
...And 2 more matches

AudioContext.createMediaStreamSource() - Web APIs
return value a new mediastreamaudiosourcenode object representing the audio node whose media is obtained from the specified source stream. ...
... return value a new mediastreamaudiosourcenode object representing the audio node whose media is obtained from the specified source stream. ...
...usermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination,...
...And 2 more matches

AudioNode.context - Web APIs
the read-only context property of the audionode interface returns the associated baseaudiocontext, that is the object representing the processing graph the node is participating in. syntax var acontext = anaudionode.context; value the audiocontext or offlineaudiocontext object that was used to construct this audionode. ...
... the read-only context property of the audionode interface returns the associated baseaudiocontext, that is the object representing the processing graph the node is participating in. syntax var acontext = anaudionode.context; value the audiocontext or offlineaudiocontext object that was used to construct this audionode. ...
... the read-only context property of the audionode interface returns the associated baseaudiocontext, that is the object representing the processing graph the node is participating in. syntax var acontext = anaudionode.context; value the audiocontext or offlineaudiocontext object that was used to construct this audionode. ...
...And 2 more matches

CanvasRenderingContext2D.drawImage() - Web APIs
the canvasrenderingcontext2d.drawimage() method of the canvas 2d api provides different ways to draw an image onto the canvas. syntax void ctx.drawimage(image, dx, dy); void ctx.drawimage(image, dx, dy, dwidth, dheight); void ctx.drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight); parameters image an element to draw into the context. the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas. sx optional the x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. sy optional the y-axis coordinate of the top left corner of the sub-rectangl...
...value, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas. sx optional the x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. sy optional the y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. swidth optional the width of the sub-rectangle of the source image to draw into the destination context. if not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used. sheight optional the height of the sub-rectangle of the source image to draw into the destination context. dx the x-axis coordinate in the destination canv...
...d="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124. it is drawn to the canvas at (21, 20), where it is given a width of 87 and a height of 104. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing. for example, if you load an image and specify the optional size parameters in its constructor, you wi...
...And 2 more matches

CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcontext2d.gettransform() method of the canvas 2d api retrieves the current transformation matrix being applied to the context. syntax let storedtransform = ctx.gettransform(); parameters none. return value a dommatrix object. the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned dommatrix. examples in the following example, we have two <canvas> elements. ...
...f001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned dommatrix. examples in the following example, we have two <canvas> elements. we apply a transform to the first one's context using canvasrenderingcontext2d.settransform() and draw a square on it, then retrieve the matrix from it using gettransform(). we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform(), and draw a circle on it. html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1px solid black; } j...
... from it using gettransform(). we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform(), and draw a circle on it. ...
...And 2 more matches

CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
on getting the imagesmoothingenabled property, the last value it was set to is returned. this property is useful for games and other apps that use pixel art. when enlarging images, the default resizing algorithm will blur the pixels. set this property to false to retain the pixels' sharpness. note: you can adjust the smoothing quality with the imagesmoothingquality property. syntax ctx.imagesmoothingenabled = value; options value a boolean indicating whether to smooth scaled images or not. the default value is true. ...
... disabling image smoothing this example compares three images. the first image is drawn at its natural size, the second is scaled to 3x and drawn with image smoothing enabled, and the third is scaled to 3x but drawn with image smoothing disabled. ...
...res three images. the first image is drawn at its natural size, the second is scaled to 3x and drawn with image smoothing enabled, and the third is scaled to 3x but drawn with image smoothing disabled. ...
...And 2 more matches

CanvasRenderingContext2D.lineJoin - Web APIs
syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter". the default is "miter". ...
... the shape used to join two line segments where they meet. this property has no effect wherever two connected segments have the same direction, because no joining area will be added in this case. degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter". the default is "miter". "round" rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. the radius for these rounded corners is equal to the line width. "bevel...
... their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. this setting is affected by the miterlimit property. default value. examples changing the joins in a path this example applies rounded line joins to a path. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 150); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options. <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.getelementbyid('ca...
...And 2 more matches

CanvasRenderingContext2D.stroke() - Web APIs
the canvasrenderingcontext2d.stroke() method of the canvas 2d api strokes (outlines) the current or given path with the current stroke style. strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side. the stroke is drawn using the non-zero winding rule, which means that path intersections will still get filled. syntax void ctx.stroke(); void ctx.stroke(path); parameters path a path2d path to stroke. examples a simple stroked rectangle this example creates a rectangle using the rect() method, and then draws it to the canvas using stroke(). ...
...ctions will still get filled. syntax void ctx.stroke(); void ctx.stroke(path); parameters path a path2d path to stroke. examples a simple stroked rectangle this example creates a rectangle using the rect() method, and then draws it to the canvas using stroke(). html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke. if you don't, the previous sub-paths will remain part of the current path, and get stroked every time you call the stroke() method. in some cases, however, this may be the desired effect. html <canvas id="canvas"></canvas> javascript ...
... previous sub-paths will remain part of the current path, and get stroked every time you call the stroke() method. in some cases, however, this may be the desired effect. html <canvas id="canvas"></canvas> javascript this code strokes the first path three times, the second path two times, and the third path only once. ...
...And 2 more matches

EXT_disjoint_timer_query.getQueryObjectEXT() - Web APIs
drawing ... ...
...drawing ... ...
...ch to return information. pname a glenum specifying which information to return. must be ext.query_result_ext or ext.query_result_available_ext. return value depends on pname: if pname is ext.query_result_ext: a gluint64ext containing the query result. if pname is ext.query_result_available_ext: a glboolean indicating whether or not a query result is available. ...
...And 2 more matches

HTMLTextAreaElement.labels - Web APIs
the htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element. syntax var labelelements = textarea.labels; return value a nodelist containing the <label> elements associated with the <textarea> element. ...
... the htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element. syntax var labelelements = textarea.labels; return value a nodelist containing the <label> elements associated with the <textarea> element. ...
... the htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element. syntax var labelelements = textarea.labels; return value a nodelist containing the <label> elements associated with the <textarea> element. ...
...And 2 more matches

OES_texture_float - Web APIs
the oes_texture_float extension is part of the webgl api and exposes floating-point pixel types for textures. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default. extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts gl.float. the pixels parameter now accepts an arraybufferview of type float32array. limitation: linear filtering linear filtering on floating-point textures is not allowed with this extension. if you set the magni...
...ension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts gl.float. the pixels parameter now accepts an arraybufferview of type float32array. limitation: linear filtering linear filtering on floating-point textures is not allowed with this extension. if you set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use floating-point textures, the texture will be marked as incomplete. to use linear filtering on floating-point textures, enable the oes_texture_float_linear extension in addition to this extension. floating-point color buffers this extension implicitly enables the we...
... recommendation initial definition. ...
...And 2 more matches

PushMessageData.text() - Web APIs
working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...And 2 more matches

TextDecoder.prototype.decode() - Web APIs
set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...
...set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...
...set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...
...And 2 more matches

TextTrackList: removeTrack event - Web APIs
the removetrack event is fired when a track is removed from a texttracklist. ...
... the removetrack event is fired when a track is removed from a texttracklist. ...
... the removetrack event is fired when a track is removed from a texttracklist. ...
...And 2 more matches

WebGLRenderingContext.bufferData() - Web APIs
the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store. syntax // webgl1: void gl.bufferdata(target, size, usage); void gl.bufferdata(target, arraybuffer? ...
...t, size, usage); void gl.bufferdata(target, arraybuffer? srcdata, usage); void gl.bufferdata(target, arraybufferview srcdata, usage); // webgl2: void gl.bufferdata(target, arraybufferview srcdata, usage, srcoffset, length); parameters target a glenum specifying the binding point (target). possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform fe...
...ion commands. gl.dynamic_draw: the contents are intended to be respecified repeatedly by the application, and used many times as the source for webgl drawing and image specification commands. gl.stream_draw: the contents are intended to be specified once by the application, and used at most a few times as the source for webgl drawing and image specification commands. when using a webgl 2 context, the following values are available additionally: gl.static_read: the contents are intended to be specified once by reading data from webgl, and queried many times by the application. gl.dynamic_read: the contents are intended to be respecified repeatedly by reading data from webgl, and queried many times by the application. gl.stream_read: the contents are intended to be specified on...
...And 2 more matches

WebGLRenderingContext.copyTexImage2D() - Web APIs
the webglrenderingcontext.copyteximage2d() method of the webgl api copies pixels from the current webglframebuffer into a 2d texture image. syntax void gl.copyteximage2d(target, level, internalformat, x, y, width, height, border); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_positive_z: positive z face for a cube-mapped texture. ...
...possible values: gl.alpha: discards the red, green and blue components and reads the alpha component. ...
...possible values: gl.alpha: discards the red, green and blue components and reads the alpha component. ...
...And 2 more matches

WebGLRenderingContext.isEnabled() - Web APIs
the webglrenderingcontext.isenabled() method of the webgl api tests whether a specific webgl capability is enabled or not for this context. by default, all capabilities except gl.dither are disabled. syntax glboolean gl.isenabled(cap); parameters cap a glenum specifying which webgl capability to test. possible values: constant description gl.blend blending of the computed fragment color values. see webglrenderingcontext.blendfunc(). gl.cull_face culling of polygons. see webglrenderingcontext.cullface(). gl.depth_test depth comparisons and updates to the depth buffer. see webglrenderingcontext.depthfunc(). gl.dither dithering of color components before they get written to the color buffer. ...
... culling of polygons. see webglrenderingcontext.cullface(). gl.depth_test depth comparisons and updates to the depth buffer. see webglrenderingcontext.depthfunc(). gl.dither dithering of color components before they get written to the color buffer. gl.polygon_offset_fill adding an offset to depth values of polygon's fragments. see webglrenderingcontext.polygonoffset(). gl.sample_alpha_to_coverage computation of a temporary coverage value determined by the alpha value. gl.sample_coverage anding the fragment's coverage with the temporary coverage value. see webglrenderingcontext.samplecoverage(). gl.scissor_test scissor test that discards fragments that are outside of the scissor rectangle. see webg...
...t(). gl.sample_alpha_to_coverage computation of a temporary coverage value determined by the alpha value. gl.sample_coverage anding the fragment's coverage with the temporary coverage value. see webglrenderingcontext.samplecoverage(). gl.scissor_test scissor test that discards fragments that are outside of the scissor rectangle. see webglrenderingcontext.scissor(). gl.stencil_test stencil testing and updates to the stencil buffer. see webglrenderingcontext.stencilfunc(). ...
...And 2 more matches

Textures from code - Web APIs
« previousnext » this webgl example provides a simple demonstration of procedural texturing with fragment shaders. that is, using code to generate textures for use in shading webgl objects. drawing textures with code texturing a point sprite with calculations done per-pixel in the fragment shader. <p>texture from code. ...
... « previousnext » this webgl example provides a simple demonstration of procedural texturing with fragment shaders. that is, using code to generate textures for use in shading webgl objects. drawing textures with code texturing a point sprite with calculations done per-pixel in the fragment shader. <p>texture from code. ...
... procedural texturing with fragment shaders. that is, using code to generate textures for use in shading webgl objects. drawing textures with code texturing a point sprite with calculations done per-pixel in the fragment shader. <p>texture from code. ...
...And 2 more matches

XMLHttpRequest.statusText - Web APIs
the read-only xmlhttprequest.statustext property returns a domstring containing the response's status message as returned by the http server. unlike xmlhttprequest.status which indicates a numerical status code, this property contains the text of the response status, such as "ok" or "not found". if the request's readystate is in unsent or opened state, the value of statustext will be an empty string. if the server response doesn't explicitly specify a status text, statustext will assume the default value "ok". ...
...rical status code, this property contains the text of the response status, such as "ok" or "not found". if the request's readystate is in unsent or opened state, the value of statustext will be an empty string. if the server response doesn't explicitly specify a status text, statustext will assume the default value "ok". ...
...uch as "ok" or "not found". if the request's readystate is in unsent or opened state, the value of statustext will be an empty string. if the server response doesn't explicitly specify a status text, statustext will assume the default value "ok". ...
...And 2 more matches

-webkit-text-fill-color - CSS: Cascading Style Sheets
the -webkit-text-fill-color css property specifies the fill color of characters of text. if this property is not set, the value of the color property is used. /* <color> values */ -webkit-text-fill-color: red; -webkit-text-fill-color: #000000; -webkit-text-fill-color: rgb(100, 200, 0); /* global values */ -webkit-text-fill-color: inherit; -webkit-text-fill-color: initial; -webkit-text-fill-color: unset; syntax values <color> the foreground fill color of the element's text content. formal definition initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = r...
... non-standard unofficial documentation i...
... non-standard unofficial documentation initial definition ...
...And 2 more matches

-webkit-text-stroke-color - CSS: Cascading Style Sheets
the -webkit-text-stroke-color css property specifies the stroke color of characters of text. if this property is not set, the value of the color property is used. /* <color> values */ -webkit-text-stroke-color: red; -webkit-text-stroke-color: #e08ab4; -webkit-text-stroke-color: rgb(200, 100, 0); /* global values */ -webkit-text-stroke-color: inherit; -webkit-text-stroke-color: initial; -webkit-text-stroke-color: unset; syntax values <color> the color of the stroke. formal definition initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>...
...#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...ercentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 2 more matches

Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors. let's take as an example a three-level hierarchical menu made from several positioned divs. second-level and third-level divs appear when hovering or clicking on their parents. usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned ...
... id selector. if the three menu levels partially overlap, then managing stacking could become a problem. the first-level menu is only relatively positioned, so no stacking context is created. the second-level menu is absolutely positioned inside the parent element. in order to put it above all first-level menus, a z-index is used. the problem is that for each second-level menu, a stacking context is created and each third-level menu belongs to the context of its parent. ...
... level #3 level #2 (z-index: 1) ... level #2 (z-index: 1) level #1 ... ...
...And 2 more matches

text-decoration-skip-ink - CSS: Cascading Style Sheets
the text-decoration-skip-ink css property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. text-decoration-skip-ink is not part of the text-decoration shorthand. ...
...derlines are drawn when they pass over glyph ascenders and descenders. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. text-decoration-skip-ink is not part of the text-decoration shorthand. syntax /* single keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; /* global keywords */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; values none underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders. auto the default — the browser...
...nese, japanese, or korean (cjk) fonts, where the auto behavior might not create interruptions. ...
...And 2 more matches

text-emphasis-position - CSS: Cascading Style Sheets
the text-emphasis-position css property sets where emphasis marks are drawn. like ruby text, if there isn't enough room for emphasis marks, the line height is increased. /* initial value */ text-emphasis-position: over right; /* keywords value */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* global values */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; syntax values over draw marks over the text in horizontal writing mode. under draw marks under the text in horizontal writing mode. right draws marks to the right of the text in vertical writing mode. left...
... description the preferred position of emphasis marks depends on the language. in japanese for example, the preferred position is over right. in chinese, on the other hand, the preferred position is under right. ...
...s under right. the informative table below summarizes the preferred emphasis mark positions for chinese, mongolian and japanese: preferred emphasis mark and ruby position language preferred position illustration horizontal vertical japanese over right korean mongolian chinese under right note: the text-emphasis-position cannot be set, and therefore are not reset either, using the text-emphasis shorthand property. formal definition initial valueover rightapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to hide emphasis marks when they confl...
...And 2 more matches

The Unicode Bidirectional Text Algorithm - Developer guides
the unicode® bidirectional algorithm (also known as the bidi algorithm) is part of the unicode text standard that describes how the user agent should order characters while rendering unicode text. understanding this algorithm in at least basic terms is helpful when you're striving to produce localization-ready web content or apps. in this guide, we'll take a look at the bidi algorithm and learn in general what it does and how it applies to your content, so that you'll be better prepared when using the features of html and css to which the algorithm applies while determining the order and directionality of text during rendering. fundamentals (base direction, character types, etc) the algorithm character level directionality directional runs (what they are, how base direction ...
...l runs (what they are, how base direction applies) handling neutral characters overriding the algorithm content about using html and css to override the default behavior of the algorithm; include info about isolating ranges etc. overiding bidi using unicode control characters unicode provides a number of special control characters that make it possible to control directionality of ranges of text. there are two sets of control characters; one set opens the override, and another restores the original directionality. you must always follow each opening character with an appropriate closing character. initial unicode bidi algorithm control characters character code point html entity markup equivalent description left-to-right isolate (lri) u+2066 &#x...
...directionality. you must always follow each opening character with an appropriate closing character. ...
...And 2 more matches

HTML attribute: readonly - HTML: Hypertext Markup Language
the boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control. if the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation. the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements. if present on any of these input types and elements, the :read-only pseudo class will match. if the attribute is not included, the :read-write pseudo class will match. the attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a...
...elevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. note: only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply. when an input has the readonly attribute, the :read-only pseudo-class also applies to it. conversely, inputs that support the readonly attribute but don't have the attribute set match the :r...
...only attribute is through a script. note: the required attribute is not permitted on inputs with the readonly attribute specified. usability browsers display the readonly attribute... constraint validation if the element is readonly, then the element's value can not be updated by the user, and does not participate in constraint validation. ...
...And 2 more matches

Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
nt, attempting to retrieve the contents of the canvas isn't allowed. if the foreign content comes from an image obtained from either as htmlcanvaselement or imagebitmap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked. calling any of the following on a tainted canvas will result in an error: calling getimagedata() on the canvas's context calling toblob() on the <canvas> element itself calling todataurl() on the canvas attempting any of these when the canvas is tainted will cause a securityerror to be thrown. this protects users from having private data exposed by using images to pull information from remote web sites without permission. storing an image from a foreign origin in this example, we wish to permit images from a ...
... fired on the image element, which means the image data has been received. finally, the image's src attribute is set to the url of the image to download; this triggers the download to begin. ...
...element, which means the image data has been received. finally, the image's src attribute is set to the url of the image to download; this triggers the download to begin. ...
...And 2 more matches

<area> - HTML: Hypertext Markup Language
this element is used only within a <map> element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. ...
...ement that accepts phrasing content. the <area> element must have an ancestor <map>, but it need not be a direct parent. implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles no role permitted dom interface htmlareaelement attributes this element's attributes include the global attributes. alt a text string alternative to display on browsers that do not display images. the text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. this attribute is required only if the href attribute is used. coords a set of values specifying the coordinates of the hot-spot region. the number and meaning of the va...
..., which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes. many browsers, notably internet explorer 4 and higher, support circ, polygon, and rectangle as valid values for shape, but these values are non-standard. target a keyword or author-defined name of the browsing context to display the linked resource. the following keywords have special meanings: _self (default): show the resource in the current browsing context. _blank: show the resource in a new, unnamed browsing context. _parent: show the resource in the parent browsing context of the current one, if the current page is inside a frame. if there is no parent, acts the same as _self. _top: show the r...
...And 2 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the med...
...eginner's tutorial. styling with css the <audio> element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser's default controls are shown. the default controls have a display value of inline by default, and it is often a good idea set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar. you can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. you can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers. to get a...
...ntrols are different across the different browsers. to get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then javascript can be used along with the htmlmediaelement api to wire up their functionality. video player styling basics provides some useful styling techniques — it is written in the context of <video>, but much of it is equally applicable to <audio>. detecting addition and removal of tracks you can detect when tracks are added to and removed from an <audio> element using the addtrack and removetrack events. however, these events aren't sent directly to the <audio> element itself. instead, they're sent to the track list object within the <audio> element's htmlmediaelement that corr...
...And 2 more matches

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
attributes this element's attributes include the global attributes. height the height of the coordinate space in css pixels. defaults to 150. moz-opaque lets the canvas know whether or not translucency will be a factor. if the canvas knows there's no translucency, painting performance can be optimized. ...
... required </canvas> tag unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). ...
... 472,907,776 pixels (i.e., 22,528 x 20,992) safari 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384) ie 8,192 pixels 8,192 pixels ? note: exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work. examples html this code snippet adds a canvas element to your html document. ...
...And 2 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
the html inline frame element (<iframe>) represents a nested browsing context, embedding another html page into the current one. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. each embedded browsing context has its own session history and document. the browsing context that embeds the others is called the parent browsing context. the topmost browsing context — the one with no parent — is usually the browser window, represented by the window object. because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources. while theoreti...
...ther higher-priority page resources. loading indicates how the browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value). lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. name a targetable name for the embedded browsing context. this can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method. referrerpolicy indicates which referrer to send when fetching the frame's resource: no-referrer: the referer header will not be sent. no-referrer-when-downgrade (default): the referer header...
...d, the resource is treated as being from a special origin that always fails the same-origin policy. allow-scripts: lets the resource run scripts (but not create popup windows). allow-storage-access-by-user-activation : lets the resource request access to the parent's storage capabilities with the storage access api. allow-top-navigation: lets the resource navigate the top-level browsing context (the one named _top). allow-top-navigation-by-user-activation: lets the resource navigate the top-level browsing context, but only if initiated by a user gesture. notes about sandboxing: when the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox a...
...And 2 more matches

<td>: The Table Data Cell element - HTML: Hypertext Markup Language
abbreviated description inside the cell and place the long content in the title attribute. align this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. center: the content is centered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes unimplemented (see bug 2212). the default value when this attribute is not specified is left. note: to achieve the same effect as t...
...unimplemented in css3. axis this attribute contains a list of space-separated strings. each string is the id of a group of cells that this header applies to. ...
...unimplemented in css3. ...
...And 2 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
arts of the resource if that data has expired from the media buffer. other media may have a media timeline that doesn't start at 0 seconds, so setting currenttime to a time before that would fail. the getstartdate() method can be used to determine the beginning point of the media timeline's reference frame. disablepictureinpicture prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases. disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc). in safari, you can use x-webkit-airplay="deny" as a fallback. duration read only a double-precision f...
... is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can play the media up to its end without stopping for content buffering. complete the rendering of an offlineaudiocontext is terminated. durationchange the duration attribute has been updated. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the med...
...dded to the element: htmlmediaelement.audiotracks an audiotracklist containing all of the media element's audio tracks. you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element. htmlmediaelement.videotracks add an addtrack listener to this videotracklist object to be informed when video tracks are added to the element. htmlmediaelement.texttracks add an addtrack event listener to this texttracklist to be notified when new text tracks are added to the element. for example, to detect when audio tracks are added to or removed from a <video> element, you can use code like this: var elem = document.queryselector("video"); elem.audiotracklist.onaddtrack = function(event) { trackeditor.addtrack(event.track); }; elem.audiotracklist.
...And 2 more matches

Converting WebAssembly text format to wasm - WebAssembly
webassembly has an s-expression-based textual representation, an intermediate form designed to be exposed in text editors, browser developer tools, etc. this article explains a little bit about how it works, and how to use available tools to convert text format files to the .wasm assembly format. note: text format files are usually saved with a .wat extension. historically, a .wast extension was also used, however that's now used for the scripting language used by the webassembly testsuite. ...
...s, browser developer tools, etc. this article explains a little bit about how it works, and how to use available tools to convert text format files to the .wasm assembly format. note: text format files are usually saved with a .wat extension. historically, a .wast extension was also used, however that's now used for the scripting language used by the webassembly testsuite. ...
..." "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i ) ) the webassembly function exported_func is exported for use in our environment (e.g. the web app in which we are using our webassembly module). when it is called, it calls an imported javascript function called imported_func, which is run with the value (42) provided as a parameter. converting the text .wat into a binary .wasm file let’s have a go at converting the above .wat text representation example into .wasm assembly format. to start with, make a copy of the above listing inside a text file; call it simple.wat. we need to assemble this textual representation into the assembly language the browser actually reads before we can use it. to do this, we can use the wabt tool, which inclu...
...And 2 more matches

Reading textual data - Archive of obsolete content
files and network sockets contain bytes, not characters - to give these bytes a meaning, you need to know the character encoding. xxx: document nsiunicharstreamlistener (gecko 1.8) xxx: also document nsistreamlistener here? determining the character encoding of data if you have a network channel (nsichannel), you can try the contentcharset property of it. note that not all channels know the character encoding of the data. ...
...a if you have a network channel (nsichannel), you can try the contentcharset property of it. note that not all channels know the character encoding of the data. you can fallback to the default character encoding stored in preferences (intl.charset.default, a localized pref value) when reading from a file, the question is harder to answer. using the system character encoding may work (xxx insert text how to get it), or again the default character encoding from preferences. converting read data if you read data from nsiscriptableinputstream as described on the file i/o code snippets page, you can convert it to utf-8 // sstream is nsiscriptableinputstream var str = sstream.read(4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"]. getservice(component...
... reading lines there is no easy, general way to read a unicode line from a stream. for the limited use case of reading lines from a local file, the following code using nsiscriptableunicodeconverter works. this code wil...
...1"] .createinstance(components.interfaces.nsifileinputstream); fis.init(file, -1, -1, 0); var lis = fis.queryinterface(components.interfaces.nsilineinputstream); var linedata = {}; var cont; do { cont = lis.readline(linedata); var line = converter.converttounicode(linedata.value); // now you can do something with line } while (cont); fis.close(); see also writing textual data joel on software: the absolute minimum every software developer absolutely, positively must know about unicode and character sets ...

statustext - Archive of obsolete content
« xul reference home statustext type: string used to set the text that appears on the status bar when the user moves the mouse over the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...
...he text that appears on the status bar when the user moves the mouse over the element. mozilla doesn't adjust the status bar automatically however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...
... however. this attribute serves only as a place to keep the text. in firefox, this text is automatically placed in the statusbar for menuitems on the menu bar. ...
...essage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </statusbar> <script> function setstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = obj.getattribute('statustext'); } function clearstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = ''; } </script> see also statusbar and statusbarpanel ...

Test your skills: HTML text basics - Learn web development
this aim of this skill test is to assess whether you've understood our html text fundamentals article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html text basics 1 in this task we want you to mark up the provided html using semantic heading and paragraph elements. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. ...
...et stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html text basics 1 in this task we want you to mark up the provided html using semantic heading and paragraph elements. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html text basics 2 in this task we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list. ...
...starting point for this task to work in your own editor or in an online editor. html text basics 2 in this task we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html text basics 3 in this task you are provided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can p...
... stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for html text basics 1 skill test". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their ...

JS_GetContextThread
obsolete since jsapi 8this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. returns the id of the associated thread for a context. syntax int js_getcontextthread(jscontext *cx); name type description cx jscontext * the context to examine. description js_getcontextthread returns the id of the thread currently associated with this context. ...
...s use is discouraged since it could be removed at any time. try to avoid using it. returns the id of the associated thread for a context. syntax int js_getcontextthread(jscontext *cx); name type description cx jscontext * the context to examine. description js_getcontextthread returns the id of the thread currently associated with this context. if the context is not currently associated with any thread, the return value is 0. see js_setcontextthread. ...
...ociated thread for a context. syntax int js_getcontextthread(jscontext *cx); name type description cx jscontext * the context to examine. description js_getcontextthread returns the id of the thread currently associated with this context. if the context is not currently associated with any thread, the return value is 0. see js_setcontextthread. js_getcontextthread is available only if the engine is built with js_threadsafe. ...
...pe description cx jscontext * the context to examine. description js_getcontextthread returns the id of the thread currently associated with this context. if the context is not currently associated with any thread, the return value is 0. see js_setcontextthread. js_getcontextthread is available only if the engine is built with js_threadsafe. ...

IAccessibleHypertext
other-licenses/ia2/accessiblehypertext.idlnot scriptable this interface exposes information about hypertext in a document. 1.0 66 introduced gecko 1.9 inherits from: iaccessibletext last changed in gecko 1.9 (firefox 3) the iaccessiblehypertext interface is the main interface to expose hyperlinks in a document, typically a text document, that are used to reference other documents. a typical implementation is to implement this interface on the smallest text object such as a paragraph of text. method overview [propget] hresult hyperlink([in] long index, [out] iaccessiblehyperlink hyperlink ); [propget] hresult hyperlinkindex([in] long charindex, [out] long hyperlinkindex ); [propget] hresult nhyperlinks([out] long hyperlinkcount ); methods hyperlink() ...
...f bad [in] passed, [out] value is null. s_ok. hyperlinkindex() returns the index of the hyperlink that is associated with this character index. this is the case when a link spans the given character index. [propget] hresult hyperlinkindex( [in] long charindex, [out] long hyperlinkindex ); parameters charindex a 0 based index of the character for which to return the link index. if iaccessibletext is used to represent the text containing the link, then the character index is only valid if it is greater than or equal to zero and lower than the number of characters in the text. hyperlinkindex the 0 based index of the hyperlink that is associated with this character index, or -1 if charindex is not on a link. return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there...
...returns 0 if there is no link. return value s_ok. ...
...index is not on a link. return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is -1. s_ok. nhyperlinks() returns the number of links and link groups contained within this hypertext paragraph. [propget] hresult nhyperlinks( [out] long hyperlinkcount ); parameters hyperlinkcount the number of links and link groups within this hypertext paragraph. returns 0 if there is no link. return value s_ok. see also iaccessiblehyperlink ...

AudioContext.createMediaStreamTrackSource() - Web APIs
the createmediastreamtracksource() method of the audiocontext interface creates and returns a mediastreamtrackaudiosourcenode which represents an audio source whose data comes from the specified mediastreamtrack. this differs from createmediastreamsource(), which creates a mediastreamaudiosourcenode whose audio comes from the audio track in a specified mediastream whose id is first, lexicographically (alphabetically). syntax var audioctx = new audiocontext(); var track = audioctx.createmediastreamtracksource(track); parameters track the mediastreamtrack to use as the source of all audio data for the new node. return value a mediastreamtrackaudiosourcenode object which acts as a source for audio data found in the specified audio track. example in this example, getusermedia() i...
...temediastreamtracksource(track); parameters track the mediastreamtrack to use as the source of all audio data for the new node. return value a mediastreamtrackaudiosourcenode object which acts as a source for audio data found in the specified audio track. example in this example, getusermedia() is used to request access to the user's microphone. once that access is attained, an audio context is established and a mediastreamtrackaudiosourcenode is created using createmediastreamtracksource(), taking its audio from the first audio track in the stream returned by getusermedia(). then a biquadfilternode is created using createbiquadfilter(), and it's configured as desired to perform a lowshelf filter on the audio coming from the source. the output from the microphone is then routed into...
...streamtracksource(), taking its audio from the first audio track in the stream returned by getusermedia(). then a biquadfilternode is created using createbiquadfilter(), and it's configured as desired to perform a lowshelf filter on the audio coming from the source. ...
...e source. the output from the microphone is then routed into the new biquad filter, and the filter's output is in turn routed to the audio context's destination. ...

AudioContextOptions - Web APIs
the audiocontextoptions dictionary is used to specify configuration options when constructing a new audiocontext object to represent a graph of web audio nodes. it is only used when calling the audiocontext() constructor. properties latencyhint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not s...
...y of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate for the context's output device is used by default. ...
...ional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate for the context's output device is used by default. constants standard values for latencyhint the latencyhint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value. "interactive" the audio is involved in interactive elements, such as responding to user actions or needing to coincide with visual...
...latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latency that will maximize playback time by minimizing power consumption at the expense of latency. useful for non-interactive playback, such as playing music. example this example instantiates an audio context for music playback (optimized for power consumption over latency), with the sample rate 48,000 hz. let musiccontext = new audiocontext({ latencyhint: "playback", samplerate: 48000 }); specifications specification status comment web audio apithe definition of 'audiocontextoptions' in that specification. working draft initial definition. ...

BaseAudioContext.createBufferSource() - Web APIs
the createbuffersource() method of the baseaudiocontext interface is used to create a new audiobuffersourcenode, which can be used to play audio data contained within an audiobuffer object. audiobuffers are created using baseaudiocontext.createbuffer or returned by baseaudiocontext.decodeaudiodata when it successfully decodes an audio track. syntax var source = baseaudiocontext.createbuffersource(); returns an audiobuffersourcenode. example in this example, we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. note: you can also run the code live, or view the source. ...
...des an audio track. syntax var source = baseaudiocontext.createbuffersource(); returns an audiobuffersourcenode. example in this example, we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. note: you can also run the code live, or view the source. ...
... var source = baseaudiocontext.createbuffersource(); returns an audiobuffersourcenode. example in this example, we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. note: you can also run the code live, or view the source. ...
...o run the code live, or view the source. ...

BaseAudioContext.createOscillator() - Web APIs
the createoscillator() method of the baseaudiocontext interface creates an oscillatornode, a source representing a periodic waveform. it basically generates a constant tone. syntax var oscillatornode = audioctx.createoscillator(); returns an oscillatornode. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. ...
... generates a constant tone. syntax var oscillatornode = audioctx.createoscillator(); returns an oscillatornode. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. ...
... oscillatornode = audioctx.createoscillator(); returns an oscillatornode. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. ...
...eateoscillator(); returns an oscillatornode. example the following example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'createoscillator' in that specification. wo...

BaseAudioContext.createScriptProcessor() - Web APIs
note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode). syntax var scriptprocessor = audioctx.createscriptprocessor(buffersize, numberofinputchannels, numberofoutputchannels); parameters buffersize the buffer size in units of sample-frames. if specified, the buffersize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384. ...
... defaults to 2. values of up to 32 are supported. important: webkit currently (version 31) requires that a valid buffersize be passed when calling this method. note: it is invalid for both numberofinputchannels and numberofoutputchannels to be zero. returns a scriptprocessornode. example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode. for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of whi...
...e in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case. ...
... noise, before setting that result to be the output sample in each case. ...

BaseAudioContext.decodeAudioData() - Web APIs
the decodeaudiodata() method of the baseaudiocontext interface is used to asynchronously decode audio file data contained in an arraybuffer. in this case the arraybuffer is loaded from xmlhttprequest and filereader. the decoded audiobuffer is resampled to the audiocontext's sampling rate, then passed to a callback or promise. this is the preferred method of creating an audio source for web audio api from an audio track. this method only works on complete file data, not fragments of audio file data. ...
...ase the arraybuffer is loaded from xmlhttprequest and filereader. the decoded audiobuffer is resampled to the audiocontext's sampling rate, then passed to a callback or promise. this is the preferred method of creating an audio source for web audio api from an audio track. this method only works on complete file data, not fragments of audio file data. syntax older callback syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcallback, errorcallback); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest, windoworworkerglobalscope.fetch() or filereader. successcallback a callback function to be invoked when the decoding...
...example, the getdata() function uses xhr to load an audio track, setting the responsetype of the request to arraybuffer so that it returns an array buffer as its response that we then store in the audiodata variable . we then pass this buffer into a decodeaudiodata() function; the success callback takes the successfully decoded pcm data, puts it into an audiobuffersourcenode created using audiocontext.createbuffersource(), connects the source to the audiocontext.destination and sets it to loop. the buttons in the example simply run getdata() to load the track and start it playing, and stop it playing, respectively. when the stop() method is called on the source, the source is cleared out. note: you can run the example live (or view the source.) // define variables var audioctx = new (win...
...rsource(), connects the source to the audiocontext.destination and sets it to loop. the buttons in the example simply run getdata() to load the track and start it playing, and stop it playing, respectively. when the stop() method is called on the source, the source is cleared out. note: you can run the example live (or view the source.) // define variables var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var source; var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio track, and // decodeaudiodata to decode it and stick it in a buffer. // then we put the buffer into the source function getdata() { source = au...

BaseAudioContext.destination - Web APIs
the destination property of the baseaudiocontext interface returns an audiodestinationnode representing the final destination of all audio in the context. it often represents an actual audio-rendering device such as your device's speakers. syntax baseaudiocontext.destination; value an audiodestinationnode. example note: for a full example implementation, see one of our web audio demos on the mdn github repo, like voice-change-o-matic. ...
...urns an audiodestinationnode representing the final destination of all audio in the context. it often represents an actual audio-rendering device such as your device's speakers. syntax baseaudiocontext.destination; value an audiodestinationnode. example note: for a full example implementation, see one of our web audio demos on the mdn github repo, like voice-change-o-matic. ...
...onnode representing the final destination of all audio in the context. it often represents an actual audio-rendering device such as your device's speakers. syntax baseaudiocontext.destination; value an audiodestinationnode. example note: for a full example implementation, see one of our web audio demos on the mdn github repo, like voice-change-o-matic. ...
... destination of all audio in the context. it often represents an actual audio-rendering device such as your device's speakers. syntax baseaudiocontext.destination; value an audiodestinationnode. example note: for a full example implementation, see one of our web audio demos on the mdn github repo, like voice-change-o-matic. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillatornode.connect(gainnode); gainnode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'destination' in that specification. working d...

CanvasRenderingContext2D.arc() - Web APIs
syntax void ctx.arc(x, y, radius, startangle, endangle [, anticlockwise]); the arc() method creates a circular arc centered at (x, y) with a radius of radius. the path starts at startangle, ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the horizontal coordinate of the arc's center. y the vertical coordinate of the arc's center. radius the arc's radius. must be positive. startangle the angle at which the arc starts in radians, measured from the positive x-axis. endangle the angle at which the arc ends in radians, measured from the positive x-axis. ...
...les drawing a full circle this example draws a complete circle with the arc() method. html <canvas></canvas> javascript the arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. to make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°). ...
...as = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc(). ...
... living standard ...

CanvasRenderingContext2D.bezierCurveTo() - Web APIs
it requires three points: the first two are control points and the third one is the end point. the starting point is the latest point in the current path, which can be changed using moveto() before creating the bézier curve. syntax void ctx.beziercurveto(cp1x, cp1y, cp2x, cp2y, x, y); parameters cp1x the x-axis coordinate of the first control point. cp1y the y-axis coordinate of the first control point. cp2x the x-axis coordinate of the second control point. cp2y the y-axis coordinate of the second control point. x the x-axis coordinate of the end point. y the y-axis coordinate of the end point. ...
... of the first control point. cp2x the x-axis coordinate of the second control point. cp2y the y-axis coordinate of the second control point. x the x-axis coordinate of the end point. y the y-axis coordinate of the end point. examples how beziercurveto works this example shows how a cubic bézier curve is drawn. ...
...point. cp2y the y-axis coordinate of the second control point. x the x-axis coordinate of the end point. y the y-axis coordinate of the end point. examples how beziercurveto works this example shows how a cubic bézier curve is drawn. ...
...are blue. a simple bézier curve this example draws a simple bézier curve using beziercurveto(). html <canvas id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (30, 30). the first control point is placed at (120, 160), and the second at (180, 10). the curve ends at (220, 140). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification. living standard ...

CanvasRenderingContext2D.clearRect() - Web APIs
note: be aware that clearrect() may cause unintended side effects if you're not using paths properly. make sure to call beginpath() before starting to draw new items after calling clearrect(). syntax void ctx.clearrect(x, y, width, height); the clearrect() method sets the pixels in a rectangular area to transparent black (rgba(0,0,0,0)). the rectangle's corner is at (x, y), and its size is specified by width and height. parameters x the x-axis coordinate of the rectangle's starting point. y the y-axis coordinate of the rectangle's starting point. width the rectangle's width. ...
... rectangle's height. positive values are down, and negative are up. examples erasing the whole canvas this code snippet erases the entire canvas. this is commonly required at the start of each frame in an animation. the dimensions of the cleared area are set to equal the <canvas> element's width and height attributes. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, canvas.width, canvas.height); erasing part of a canvas this example draws a blue triangle on top of a yellowish background. the clearrect() method then erases part of the canvas. html <canvas id="canvas"></canvas> javascript the cleared area is rectangular in shape, with its top-left corner at (10, 10). the cleared area has a width of 120 and a height of 100. co...
...f a canvas this example draws a blue triangle on top of a yellowish background. the clearrect() method then erases part of the canvas. html <canvas id="canvas"></canvas> javascript the cleared area is rectangular in shape, with its top-left corner at (10, 10). the cleared area has a width of 120 and a height of 100. ...
... living standard ...

CanvasRenderingContext2D.clip() - Web APIs
it replaces any previous clipping region. in the image below, the red outline represents a clipping region shaped like a star. only those parts of the checkerboard pattern that are within the clipping region get drawn. note: be aware that the clipping region is only constructed from shapes added to the path. it doesn't work with shape primitives drawn directly to the canvas, such as fillrect(). instead, you'd have to use rect() to add a rectangular shape to the path before calling clip(). ...
...le uses the clip() method to create a clipping region according to the shape of a circular arc. two rectangles are then drawn; only those parts within the clipping region are rendered. html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (100, 75), and a radius of 50. ...
... fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method. the "evenodd" rule creates a hole where the clipping rectangles intersect; by default (with the "nonzero" rule), there would be no hole. ...
...context('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification. living standard ...

CanvasRenderingContext2D.createImageData() - Web APIs
all of the pixels in the new object are transparent black. syntax imagedata ctx.createimagedata(width, height); imagedata ctx.createimagedata(imagedata); parameters width the width to give the new imagedata object. a negative value flips the rectangle around the vertical axis. height the height to give the new imagedata object. a negative value flips the rectangle around the horizontal axis. imagedata an existing imagedata object from which to copy the width and height. the image itself is not copied. return value a new imagedata object with the specified width and height. ...
...ta object using the createimagedata() method. html <canvas id="canvas"></canvas> javascript the generated object is 100 pixels wide and 50 pixels tall, making 5,000 pixels in all. each pixel within an imagedata object consists of four array values, so the object's data property has a length of 4 × 5,000, or 20,000. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 50); console.log(imagedata); // imagedata { width: 100, height: 50, data: uint8clampedarray[20000] } filling a blank imagedata object this example creates and fills a new imagedata object with purple pixels. html <canvas id="canvas"></canvas> javascript since each pixel consists of four values, the for loop iterates by multiples of four. ...
...ect this example creates and fills a new imagedata object with purple pixels. html <canvas id="canvas"></canvas> javascript since each pixel consists of four values, the for loop iterates by multiples of four. the array values associated with each pixel are r (red), g (green), b (blue), and a (alpha), in that order. ...
... living standard ...

CanvasRenderingContext2D.createLinearGradient() - Web APIs
this method returns a linear canvasgradient. to be applied to a shape, the gradient must first be assigned to the fillstyle or strokestyle properties. note: gradient coordinates are global, i.e., relative to the current coordinate space. when applied to a shape, the coordinates are not relative to the shape's coordinates. syntax canvasgradient ctx.createlineargradient(x0, y0, x1, y1); the createlineargradient() method is specified by four parameters defining the start and end points of the gradient line. parameters x0 the x-axis coordinate of the start point. y0 the y-axis coordinate of the start point. ...
...axis coordinate of the end point. return value canvasgradient a linear canvasgradient initialized with the specified line. examples filling a rectangle with a linear gradient this example initializes a linear gradient using the createlineargradient() method. three color stops between the gradient's start and end points are then created. ...
... linear gradient this example initializes a linear gradient using the createlineargradient() method. three color stops between the gradient's start and end points are then created. finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle. ...
... living standard ...

CanvasRenderingContext2D.createRadialGradient() - Web APIs
this method returns a canvasgradient. to be applied to a shape, the gradient must first be assigned to the fillstyle or strokestyle properties. note: gradient coordinates are global, i.e., relative to the current coordinate space. when applied to a shape, the coordinates are not relative to the shape's coordinates. syntax canvasgradient ctx.createradialgradient(x0, y0, r0, x1, y1, r1); the createradialgradient() method is specified by six parameters, three defining the gradient's start circle, and three defining the end circle. parameters x0 the x-axis coordinate of the start circle. ...
...e. must be non-negative and finite. return value canvasgradient a radial canvasgradient initialized with the two specified circles. examples filling a rectangle with a radial gradient this example initializes a radial gradient using the createradialgradient() method. three color stops between the gradient's two circles are then created. ...
... this example initializes a radial gradient using the createradialgradient() method. three color stops between the gradient's two circles are then created. finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle. ...
... living standard ...

CanvasRenderingContext2D.ellipse() - Web APIs
syntax void ctx.ellipse(x, y, radiusx, radiusy, rotation, startangle, endangle [, anticlockwise]); the ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusx and radiusy. the path starts at startangle and ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the x-axis (horizontal) coordinate of the ellipse's center. y the y-axis (vertical) coordinate of the ellipse's center. radiusx the ellipse's major-axis radius. must be non-negative. radiusy the ellipse's minor-axis radius. must be non-negative. ...
...lt value is false (clockwise). examples drawing a full ellipse this example draws an ellipse at an angle of π/4 radians (45°). to make a full ellipse, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°). html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties. html <canvas id="canvas"></canvas>...
..., 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties. ...
... living standard ...

CanvasRenderingContext2D.fill() - Web APIs
the canvasrenderingcontext2d.fill() method of the canvas 2d api fills the current or given path with the current fillstyle. syntax void ctx.fill([fillrule]); void ctx.fill(path [, fillrule]); parameters fillrule the algorithm by which to determine if a point is inside or outside the filling region. possible values: "nonzero": the non-zero winding rule. default rule. "evenodd": the even-odd winding rule. path a path2d path to fill. examples filling a rectangle this example fills a rectangle with the fill() method. ...
...inside or outside the filling region. possible values: "nonzero": the non-zero winding rule. default rule. "evenodd": the even-odd winding rule. path a path2d path to fill. examples filling a rectangle this example fills a rectangle with the fill() method. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object. the fill() method is then used to render the object to the canvas. a hole is left unfilled in the object's center by using the "evenodd" rule; by default (with the "nonzero" rule), the hole would also be filled. html <canvas id="canvas"></ca...
...his example saves some intersecting lines to a path2d object. the fill() method is then used to render the object to the canvas. a hole is left unfilled in the object's center by using the "evenodd" rule; by default (with the "nonzero" rule), the hole would also be filled. ...
... living standard ...

CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, gradient, or pattern to use inside shapes. the default style is #000 (black). for more examples of fill and stroke styles, see applying styles and color in the canvas tutorial. syntax ctx.fillstyle = color; ctx.fillstyle = gradient; ctx.fillstyle = pattern; options color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. ...
... color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color. to achieve this, we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values. (the blue channel has a fixed value.
...ifferent fill color. to achieve this, we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values. (the blue channel has a fixed value.) by modifying the channels, you can generate all kinds of palettes. ...
... living standard ...

CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas. see also the chapter applying styles and color in the canvas tutorial. syntax ctx.globalalpha = value; options value a number between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. the default value is 1.0. values outside that range, including infinity and nan, will not be set, and globalalpha will retain its previous value. examples drawing translucent shapes this example uses the globalalpha property to draw two semi-transparent rectangles. ...
...ve. the default value is 1.0. values outside that range, including infinity and nan, will not be set, and globalalpha will retain its previous value. examples drawing translucent shapes this example uses the globalalpha property to draw two semi-transparent rectangles. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other. we begin by drawing a solid background composed of four differently colored squares. next, we set the globalalph...
... increasing radii. with each new circle, the opacity of the previous circles underneath is effectively increased. if we were to increase the step count (and thus draw more circles), the background would eventually disappear completely from the center of the image. ...
... living standard ...

CanvasRenderingContext2D.isPointInStroke() - Web APIs
syntax ctx.ispointinstroke(x, y); ctx.ispointinstroke(path, x, y); parameters x the x-axis coordinate of the point to check. y the y-axis coordinate of the point to check. path a path2d path to check against. if unspecified, the current path is used. return value boolean a boolean, which is true if the point is inside the area contained by the stroking of a path, otherwise false. examples checking a point in the current path this example uses the ispointinstroke() method to check if a point is within the area of the current path's stroke. ...
...area contained by the stroking of a path, otherwise false. examples checking a point in the current path this example uses the ispointinstroke() method to check if a point is within the area of the current path's stroke. html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path. if yes, the ellipse's stroke becomes green, otherwise it is red. html <canvas id="...
....innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path. if yes, the ellipse's stroke becomes green, otherwise it is red. ...
... living standard ...

CanvasRenderingContext2D.lineCap - Web APIs
the canvasrenderingcontext2d.linecap property of the canvas 2d api determines the shape used to draw the end points of lines. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints. default value. "round" the ends of lines are rounded. "square" the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness. examples changing the shape of line caps this example rounds the end caps of a straight line. ...
...t value. "round" the ends of lines are rounded. "square" the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness. examples changing the shape of line caps this example rounds the end caps of a straight line. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.linewidth = 15; ctx.linecap = 'round'; ctx.lineto(100, 100); ctx.stroke(); result comparison of line caps in this example three lines are drawn, each with a different value for the linecap property. two guides to see the exact differences between the three are added. each of these lines starts and ends exactly on these guides. the line on th...
...h the guides. the second is set to use the "round" option. this adds a semicircle to the end that has a radius half the width of the line. the line on the right uses the "square" option. this adds a box with an equal width and half the height of the line thickness. ...
... living standard ...

CanvasRenderingContext2D.lineDashOffset - Web APIs
the canvasrenderingcontext2d.linedashoffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method. syntax ctx.linedashoffset = value; value a float specifying the amount of the line dash offset. the default value is 0.0. examples offsetting a line dash this example draws two dashed lines. the first has no dash offset. the second has a dash offset of 4. ...
...thod. syntax ctx.linedashoffset = value; value a float specifying the amount of the line dash offset. the default value is 0.0. examples offsetting a line dash this example draws two dashed lines. the first has no dash offset. the second has a dash offset of 4. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red. marching ants the marching ants effect is an anim...
...lt the line with a dash offset is drawn in red. marching ants the marching ants effect is an animation technique often found in selection tools of computer graphics programs. it helps the user to distinguish the selection border from the image background by animating the border. ...
... living standard ...

CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix. syntax void ctx.resettransform(); examples resetting the matrix this example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resettransform() method. html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 45°. the fillrect() method draws a filled rectangle, adjusted according to that matrix. ...
...is example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resettransform() method. html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 45°. the fillrect() method draws a filled rectangle, adjusted according to that matrix. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else. in this example, the first two shapes are drawn with a skew tran...
...ular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else. in this example, the first two shapes are drawn with a skew transformation, and the last two are drawn with the identity (regular) transformation. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red. polyfill you can also use the settra...
... living standard ...

CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix. syntax void ctx.rotate(angle); parameters angle the rotation angle, clockwise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. ...
...hange the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. ...
...s center coordinates in a negative direction. html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80, 60), a width of 140, a height of 30. its horizontal center is at (80 + 140 / 2), or 150. its vertical center is at (60 + 30 / 2), or 75. thus, the center point is at (150, 75). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red. specifications specification status ...
... living standard ...

CanvasRenderingContext2D.scale() - Web APIs
by default, one unit on the canvas is exactly one pixel. a scaling transformation modifies this behavior. for instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size. syntax void ctx.scale(x, y); parameters x scaling factor in the horizontal direction. a negative value flips pixels across the vertical axis. a value of 1 results in no horizontal scaling. y scaling factor in the vertical direction. ...
...rectangle has a specified width of 8 and a height of 20. the transformation matrix scales it by 9x horizontally and by 3x vertically. thus, its final size is a width of 72 and a height of 60. notice that its position on the canvas also changes. since its specified corner is (10, 10), its rendered corner becomes (90, 30). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gray. flipping things horizontally or vertically y...
...9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gray. flipping things horizontally or vertically you can use scale(-1, 1) to flip the context horizontally and scale(1, -1) to flip it vertically. in this example, the words "hello world!" are flipped horizontally. note that the call to filltext() specifies a negative x coordinate. this is to adjust for the negative scaling factor: -280 * -1 becomes 280, and text is drawn leftwards from that point. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid(...
...ip it vertically. in this example, the words "hello world!" are flipped horizontally. note that the call to filltext() specifies a negative x coordinate. this is to adjust for the negative scaling factor: -280 * -1 becomes 280, and text is drawn leftwards from that point. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification. living standard ...

CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
the canvasrenderingcontext2d.scrollpathintoview() method of the canvas 2d api scrolls the current or given path into view. it is similar to element.scrollintoview(). syntax void ctx.scrollpathintoview(); void ctx.scrollpathintoview(path); parameters path a path2d path to use. examples using the scrollpathintoview method this example demonstrates the scrollpathintoview() method. ...
...ew. it is similar to element.scrollintoview(). syntax void ctx.scrollpathintoview(); void ctx.scrollpathintoview(path); parameters path a path2d path to use. examples using the scrollpathintoview method this example demonstrates the scrollpathintoview() method. ...
...t(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.c...
...); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcont...

CanvasRenderingContext2D.setLineDash() - Web APIs
it uses an array of values that specify alternating lengths of lines and gaps which describe the pattern. note: to return to using solid lines, set the line dash list to an empty array. syntax ctx.setlinedash(segments); parameters segments an array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). if the number of elements in the array is odd, the elements of the array get copied and concatenated. for example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. ...
...5, 25] will become [5, 15, 25, 5, 15, 25]. if the array is empty, the line dash list is cleared and line strokes return to being solid. return value undefined. examples basic example this example uses the setlinedash() method to draw a dashed line above a solid line. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns. html <canvas id="canvas"></canvas> javascript the drawdashedline()...
...</canvas> javascript the drawdashedline() function created below makes the drawing of multiple dashed lines simple. it receives a pattern array as its only parameter. ...
....getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.setlinedash' in that specification. living standard ...

CanvasRenderingContext2D.shadowColor - Web APIs
be aware that the shadow's rendered opacity will be affected by the opacity of the fillstyle color when filling, and of the strokestyle color when stroking. note: shadows are only drawn if the shadowcolor property is set to a non-transparent value. one of the shadowblur, shadowoffsetx, or shadowoffsety properties must be non-zero, as well. syntax ctx.shadowcolor = color; color a domstring parsed as a css <color> value. the default value is fully-transparent black. examples adding a shadow to shapes this example adds a shadow to two squares; the first one is filled, and the second one is stroked. ...
...ack. examples adding a shadow to shapes this example adds a shadow to two squares; the first one is filled, and the second one is stroked. the shadowcolor property sets the shadows' color, while shadowoffsetx and shadowoffsety set their position relative to the shapes. ...
...y level of its parent object (even when shadowcolor specifies a completely opaque value). this example strokes and fills a rectangle with translucent colors. html <canvas id="canvas"></canvas> javascript the resulting alpha value of the fill shadow is .8 * .2, or .16. the alpha of the stroke shadow is .8 * .6, or .48. ...
... living standard ...

CanvasRenderingContext2D.strokeRect() - Web APIs
this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. syntax void ctx.strokerect(x, y, width, height); the strokerect() method draws a stroked rectangle whose starting point is at (x, y) and whose size is specified by width and height. parameters x the x-axis coordinate of the rectangle's starting point. y the y-axis coordinate of the rectangle's starting point. width the rectangle's width. positive values are to the right, and negative to the left. height the rectangle's height. ...
...e's height. positive values are down, and negative are up. examples a simple stroked rectangle this example draws a rectangle with a green outline using the strokerect() method. html <canvas id="canvas"></canvas> javascript the rectangle's top-left corner is at (20, 10). it has a width of 160 and a height of 100. ...
...xample draws a rectangle with a green outline using the strokerect() method. html <canvas id="canvas"></canvas> javascript the rectangle's top-left corner is at (20, 10). it has a width of 160 and a height of 100. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines. ...
...const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification. living standard ...

CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. the default is #000 (black). for more examples of stroke and fill styles, see applying styles and color in the canvas tutorial. syntax ctx.strokestyle = color; ctx.strokestyle = gradient; ctx.strokestyle = pattern; options color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
... color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color. to achieve this, we use the two variables i and j to generate a unique rgb color for each circle, and only modify the green and blue values. (the red ...
...mple, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color. to achieve this, we use the two variables i and j to generate a unique rgb color for each circle, and only modify the green and blue values. ...
... living standard ...

CanvasRenderingContext2D.translate() - Web APIs
syntax void ctx.translate(x, y); the translate() method adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid. parameters x distance to move in the horizontal direction. positive values are to the right, and negative to the left. y distance to move in the vertical direction. positive values are down, and negative are up. examples moving a shape this example draws a square that is moved from its default position by the translate() method. an unmoved square of the same size is then drawn for comparison. ...
...nd negative to the left. y distance to move in the vertical direction. positive values are down, and negative are up. examples moving a shape this example draws a square that is moved from its default position by the translate() method. an unmoved square of the same size is then drawn for comparison. ...
...om its default position by the translate() method. an unmoved square of the same size is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically. the first square is shifted by those amounts from its default position. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray. specifications specification status comment ...
... living standard ...

Element: contextmenu event - Web APIs
the contextmenu event fires when the user attempts to open a context menu. this event is typically triggered by clicking the right mouse button, or by pressing the context menu key. in the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row. any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element. ...
...ess the element is a tree, in which case the context menu is displayed at the bottom left of the current row. any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element. bubbles yes cancelable yes interface mouseevent event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser. ...
...t event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser. ...
...handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph. as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser. html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); }); result specifications specification status comment html living standardthe definition of 'contextmenu' in that specification. ...

GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events. the contextmenu event typically fires when the right mouse button is clicked on the window. unless the default behavior is prevented, the browser context menu will activate. syntax target.oncontextmenu = functionref; value functionref is a function name or a function expression. the function receives an event object as its sole argument. only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try ope...
...ceives an event object as its sole argument. only one oncontextmenu handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try opening the context menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shap...
... living standard ...
... living standard ...

HTMLCanvasElement: webglcontextrestored event - Web APIs
the webglcontextrestored event of the webgl api is fired if the user agent restores the drawing buffer for a webglrenderingcontext object. once the context is restored, webgl resources such as textures and buffers that were created before the context was lost are no longer valid. you need to reinitialize the state of your webgl application and recreate resources. ...
... fired if the user agent restores the drawing buffer for a webglrenderingcontext object. once the context is restored, webgl resources such as textures and buffers that were created before the context was lost are no longer valid. you need to reinitialize the state of your webgl application and recreate resources. ...
...ntext is restored, webgl resources such as textures and buffers that were created before the context was lost are no longer valid. you need to reinitialize the state of your webgl application and recreate resources. bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); // "webglcontextrestored" event is logged. specifications specification status comment...
...estored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); // "webglcontextrestored" event is logged. specifications specification status comment webgl 1.0the definition of 'webglcontextrestored' in that specification. recommendation initial definition. ...

OES_texture_half_float - Web APIs
the oes_texture_half_float extension is part of the webgl api and adds texture formats with 16- (aka half float) and 32-bit floating-point components. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default. the constant in webgl2 is gl.half_float. constants ext.half_float_oes half floating-point type (16-bit). extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts ext.half_float_oes. limitation: linear filtering linear filter...
...ailable on the webgl2 context by default. the constant in webgl2 is gl.half_float. constants ext.half_float_oes half floating-point type (16-bit). extended methods this extension extends webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d(): the type parameter now accepts ext.half_float_oes. limitation: linear filtering linear filtering on half floating-point textures is not allowed with this extension. if you set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use half floating-point textures, the texture will be marked as incomplete. ...
...on half floating-point textures is not allowed with this extension. if you set the magnification or minification filter in the webglrenderingcontext.texparameter() method to one of gl.linear, gl.linear_mipmap_nearest, gl.nearest_mipmap_linear, or gl.linear_mipmap_linear, and use half floating-point textures, the texture will be marked as incomplete. to use linear filtering on half floating-point textures, enable the oes_texture_half_float_linear extension in addition to this extension. half floating-point color buffers this extension implicitly enables the ext_color_buffer_half_float extension (if supported), which allows rendering to 16-bit floating point formats. ...
...tures, the texture will be marked as incomplete. to use linear filtering on half floating-point textures, enable the oes_texture_half_float_linear extension in addition to this extension. half floating-point color buffers this extension implicitly enables the ext_color_buffer_half_float extension (if supported), which allows rendering to 16-bit floating point formats. examples var ext = gl.getextension('oes_texture_half_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, ext.half_float_oes, image); specifications specification status comment oes_texture_half_floatthe definition of 'oes_texture_half_float' in that specification. recommendation initial definition. ...

PublicKeyCredential.getClientExtensionResults() - Web APIs
during the creation or fetching of a publickeycredential (respectively via navigator.credentials.create() and navigator.credentials.get()), it is possible to have "custom" processing by the client for different extensions which are respectively given by publickeycredentialcreationoptions.extensions and publickeycredentialrequestoptions.extensions. note: extensions are optional and different browsers may recognize different extensions. ...
...ctively given by publickeycredentialcreationoptions.extensions and publickeycredentialrequestoptions.extensions. note: extensions are optional and different browsers may recognize different extensions. all extensions are optional for the client to process them: if a browser does not know of a given extension, that will not cause any failure. note: this method may only be used in top-level contexts and will not be available in an <iframe> for example. syntax maparraybuffer = publickeycredential.getclientextensionresults() parameters none. return value an arraybuffer containing the result of the processing of the different extensions by the client. this object contains a map between the extensions' identifiers and their results from the processing. warning! as of march 2019, only a...
... recomm...
...) { var mybuffer = newcredentialinfo.getclientextensionresults(); // mybuffer will contain the result of any of the processing of the "loc" and "uvi" extensions }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'getclientextensionresults()' in that specification. recommendation initial definition. ...

Request.context - Web APIs
the deprecated context read-only property of the request interface contains the context of the request (e.g., audio, image, iframe). this defines what sort of resource is being fetched. this has been replaced by the destination property. the context of a request is only relevant in the serviceworker api; a service worker can make decisions based on whether the url is for an image, or an embeddable object such as a <video>, iframe, etc. note: you can find a full list of the different available contexts including associated context frame types, csp directives, and platform feature examples in the fetch spec request context section. syntax var mycontext = request.context; value a requestcontext value. example in the following snippet, we create a new request using the request.request...
...le contexts including associated context frame types, csp directives, and platform feature examples in the fetch spec request context section. syntax var mycontext = request.context; value a requestcontext value. ...
...platform feature examples in the fetch spec request context section. syntax var mycontext = request.context; value a requestcontext value. ...
...mples in the fetch spec request context section. syntax var mycontext = request.context; value a requestcontext value. ...

WEBGL_compressed_texture_atc - Web APIs
the webgl_compressed_texture_atc extension is part of the webgl api and exposes 3 atc compressed texture formats. atc is a proprietary compression algorithm for compressing textures on handheld devices. compressed textures reduce the amount of memory needed to store a texture on the gpu, allowing for higher resolution textures or more of the same resolution textures. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: atc compression is typically available on mobile devices with adreno gpus, that are currently only built into qualcomm snapdragon devices. this extension is available to both, webgl1 and webgl2 contexts. ...
...extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: atc compression is typically available on mobile devices with adreno gpus, that are currently only built into qualcomm snapdragon devices. this extension is available to both, webgl1 and webgl2 contexts. constants the compressed texture formats are exposed by 3 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ext.compressed_rgb_atc_webgl compresses rgb textures with no alpha channel. ext.compressed_rgba_atc_explicit_alpha_webgl compresses rgba textures using explicit alpha encoding (useful when alpha transitions are sharp). ext.compressed_rgba_atc_interpolated_alpha_webg...
...osed by 3 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ext.compressed_rgb_atc_webgl compresses rgb textures with no alpha channel. ext.compressed_rgba_atc_explicit_alpha_webgl compresses rgba textures using explicit alpha encoding (useful when alpha transitions are sharp). ext.compressed_rgba_atc_interpolated_alpha_webgl compresses rgba textures using interpolated alpha encoding (useful when alpha transitions are gradient). ...
...ompressed_rgb_atc_webgl compresses rgb textures with no alpha channel. ext.compressed_rgba_atc_explicit_alpha_webgl compresses rgba textures using explicit alpha encoding (useful when alpha transitions are sharp). ext.compressed_rgba_atc_interpolated_alpha_webgl compresses rgba textures using interpolated alpha encoding (useful when alpha transitions are gradient). examples var ext = gl.getextension('webgl_compressed_texture_atc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_atc_webgl, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_atcthe definition of 'webgl_compressed_texture_atc' in that specification. draft in...

WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
the webgl2renderingcontext.copytexsubimage3d() method of the webgl api copies pixels from the current webglframebuffer into an existing 3d texture sub-image. syntax void gl.copytexsubimage3d(target, level, xoffset, yoffset, zoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the x offset within the texture image. yoffset a glint specifying the y offset within the texture image. zoffset a glint specifying the z offset within the t...
... editor's draft initial definition. ...
... editor's draft initial definition. ...
... editor's draft initial definition. opengl es 3.0the definition of 'glcopytexsubimage3d' in that specification. ...

WebGL2RenderingContext.getSamplerParameter() - Web APIs
the webgl2renderingcontext.getsamplerparameter() method of the webgl 2 api returns parameter information of a webglsampler object. syntax any gl.getsamplerparameter(sampler, pname); parameters sampler a webglsampler object. pname a glenum specifying which information to return. possible values: gl.texture_compare_func: returns a glenum indicating the texture comparison function. gl.texture_compare_mode: returns a glenum indicating the texture comparison mode. gl.texture_mag_filter: returns a glenum indicating the texture magnification filter. gl.texture_max_lod: returns a glfloat indicating the maximum level-of-detail value. ...
...g which information to return. possible values: gl.texture_compare_func: returns a glenum indicating the texture comparison function. gl.texture_compare_mode: returns a glenum indicating the texture comparison mode. gl.texture_mag_filter: returns a glenum indicating the texture magnification filter. gl.texture_max_lod: returns a glfloat indicating the maximum level-of-detail value. gl.texture_min_filter: returns a glenum indicating the texture minification filter gl.texture_min_lod: returns a glfloat indicating the minimum level-of-detail value. gl.texture_wrap_r: returns a glenum indicating the texture wrapping function for the texture coordinate r. ...
...exture magnification filter. gl.texture_max_lod: returns a glfloat indicating the maximum level-of-detail value. gl.texture_min_filter: returns a glenum indicating the texture minification filter gl.texture_min_lod: returns a glfloat indicating the minimum level-of-detail value. gl.texture_wrap_r: returns a glenum indicating the texture wrapping function for the texture coordinate r. gl.texture_wrap_s: returns a glenum indicating the texture wrapping function for the texture coordinate s. gl.texture_wrap_t: returns a glenum indicating the texture wrapping function for the texture coordinate t. return value depends on the pname parameter, either a glenum or a glfloat. ...
... editor's draft initial definition. opengl es 3.0the definition of 'glgetsamplerparameter' in that specification. ...

WebGL2RenderingContext.samplerParameter[if]() - Web APIs
the webgl2renderingcontext.samplerparameter[if]() methods of the webgl 2 api set webglsampler parameters. syntax void gl.samplerparameteri(sampler, pname, param); void gl.samplerparameterf(sampler, pname, param); parameters sampler a webglsampler object. pname a glenum specifying which parameter to set. possible values: gl.texture_compare_func: a glenum specifying the texture comparison function. gl.texture_compare_mode: a glenum specifying the texture comparison mode. gl.texture_mag_filter: a glenum specifying the texture magnification filter. gl.texture_max_lod: a glfloat specifying the maximum level-of-detail value. ...
...er object. pname a glenum specifying which parameter to set. possible values: gl.texture_compare_func: a glenum specifying the texture comparison function. gl.texture_compare_mode: a glenum specifying the texture comparison mode. gl.texture_mag_filter: a glenum specifying the texture magnification filter. gl.texture_max_lod: a glfloat specifying the maximum level-of-detail value. gl.texture_min_filter: a glenum specifying the texture minification filter gl.texture_min_lod: a glfloat specifying the minimum level-of-detail value. gl.texture_wrap_r: a glenum specifying the texture wrapping function for the texture coordinate r. ...
...ilter: a glenum specifying the texture magnification filter. gl.texture_max_lod: a glfloat specifying the maximum level-of-detail value. gl.texture_min_filter: a glenum specifying the texture minification filter gl.texture_min_lod: a glfloat specifying the minimum level-of-detail value. gl.texture_wrap_r: a glenum specifying the texture wrapping function for the texture coordinate r. gl.texture_wrap_s: a glenum specifying the texture wrapping function for the texture coordinate s. gl.texture_wrap_t: a glenum specifying the texture wrapping function for the texture coordinate t. param a glint (samplerparameteri) or a glfloat (samplerparameterf) specifying a value for pname. return value none. ...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

WebGLRenderingContext.bindBuffer() - Web APIs
gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. ...
... gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. ...
...bgl api binds a given webglbuffer to a target. syntax void gl.bindbuffer(target, buffer); parameters target a glenum specifying the binding point (target). possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel...
...ill throw an invalid_operation error and the current buffer binding will remain the same. a webglbuffer which has been marked for deletion with deletebuffer cannot be (re-)bound. an attempt to do so will generate an invalid_operation error, and the current binding will remain untouched. examples binding a buffer to a target var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); getting current bindings to check the current buffer bindings, query the array_buffer_binding and element_array_buffer_binding constants. gl.getparameter(gl.array_buffer_binding); gl.getparameter(gl.element_array_buffer_binding); specifications specification status comment webgl 1.0th...

WebGLRenderingContext.checkFramebufferStatus() - Web APIs
used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. ...
...t.checkframebufferstatus() method of the webgl api returns the completeness status of the webglframebuffer object. syntax glenum gl.checkframebufferstatus(target); parameters target a glenum specifying the binding point (target). possible values: gl.framebuffer: collection buffer data storage of color, alpha, depth and stencil buffers used to render an image. when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer. used as a destination for drawing, rendering, clearing, and writing operations. gl.read_framebuffer: used as a source for reading operations. return value a glenum indicating the completeness status of the framebuffer or 0 if an error occurs. possible enum return values: ...
...ll framebuffer attachment points are framebuffer attachment complete. gl.framebuffer_incomplete_missing_attachment: there is no attachment. gl.framebuffer_incomplete_dimensions: height and width of the attachment are not the same. gl.framebuffer_unsupported: the format of the attachment is not supported or if depth and stencil attachments are not the same renderbuffer. when using a webgl 2 context, the following values can be returned additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures. when using the ovr_multiview2 extension, the following value can be returned additionally: ext.framebuffer_incomplete_view_targe...
...g the ovr_multiview2 extension, the following value can be returned additionally: ext.framebuffer_incomplete_view_targets_ovr: if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete. examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); // ... gl.checkframebufferstatus(gl.framebuffer); specifications specification status comment webgl 1.0the definition of 'checkframebufferstatus' in that specification. recommendation initial definition for webgl. opengl es 2.0the definition of 'glcheckframebufferstatus' in that specification. stand...

WebGLRenderingContext.copyTexSubImage2D() - Web APIs
the webglrenderingcontext.copytexsubimage2d() method of the webgl api copies pixels from the current webglframebuffer into an existing 2d texture sub-image. syntax void gl.copytexsubimage2d(target, level, xoffset, yoffset, x, y, width, height); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. ...
... of the active texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. gl.texture_cube_map_positive_y: positive y face for a cube-mapped texture. gl.texture_cube_map_negative_y: negative y face for a cube-mapped texture. gl.texture_cube_map_positive_z: positive z face for a cube-mapped texture. gl.texture_cube_map_negative_z: negative z face for a cube-mapped texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the horizontal offset within the texture image. yoffset a glint specifying the vertical offse...
...positive_z: positive z face for a cube-mapped texture. gl.texture_cube_map_negative_z: negative z face for a cube-mapped texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the horizontal offset within the texture image. yoffset a glint specifying the vertical offset within the texture image. x a glint specifying the x coordinate of the lower left corner where to start copying. y a glint specifying the y coordinate of the lower left corner where to start copying. width a glsizei specifying the width of the texture. height a glsizei specifying the height of the texture. return value none. ...
... recommendation initial definition. opengl es 2.0the definition of 'glcopytexsubimage2d' in that specification. ...

WebGLRenderingContext.getBufferParameter() - Web APIs
gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. ...
... gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. ...
... api returns information about the buffer. syntax any gl.getbufferparameter(target, pname); parameters target a glenum specifying the target buffer object. possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel...
...k_buffer: buffer used for pixel transfer operations. pname a glenum specifying information to query. possible values: gl.buffer_size: returns a glint indicating the size of the buffer in bytes. gl.buffer_usage: returns a glenum indicating the usage pattern of the buffer. this is either: gl.static_draw, gl.dynamic_draw, gl.stream_draw. when using a webgl 2 context, the following values are available additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy. return value depends on the requested information (as specified with pname). either a glint or a glenum. examples gl.getbufferparameter(gl.array_buffer, gl.buffer_size); specificat...

-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -webkit-text-stroke-width css property specifies the width of the stroke for text. syntax /* keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. ...
... values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. ...
...; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification. l...
...bkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification. living standard initial standardization safari css reference '-webkit-text-stroke-width' in that document. non-standard unofficial documentation initial documentation ...

Stacking context example 2 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 2 this is a very simple example, but it is the key for understanding the concept of stacking context. there are the same four divs of the previous example, but now z-index properties are assigned on both levels of the hierarchy. you can see that div #2 (z-index: 2) is above div #3 (z-index: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked. what can be considered strange is that div #2 (z-index: 2) is above div #4 (z-index: 10), despite their z-index values. the reason is that they do not belong to the same stacking context. div #4 belongs to the stacking context created by div #3, and as explained previously div #3 (and all its content) is under div #2. ...
...ents are stacked. what can be considered strange is that div #2 (z-index: 2) is above div #4 (z-index: 10), despite their z-index values. the reason is that they do not belong to the same stacking context. div #4 belongs to the stacking context created by div #3, and as explained previously div #3 (and all its content) is under div #2. to better understand the situation, this is the stacking context hierarchy: root stacking context div #2 (z-index 2) div #3 (z-index 1) div #4 (z-index 10) note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy. in the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. example source code <!doctype html publi...
... note: it is worth remembering that in general the html hierarchy is different from the stacking context hierarchy. in the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. ...
...ight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position: relative; <div id="div2">...

text-underline-offset - CSS: Cascading Style Sheets
the text-underline-offset css property sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position. text-underline-offset is not part of the text-decoration shorthand. while an element can have multiple text-decoration lines, text-underline-offset only impacts underlining, and not other possible line decoration options such as overline or line-through. syntax /* single keyword */ text-underline-offset: auto; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /* global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below. valu...
...are child elements with different font sizes or vertical alignment. formal definition initial valueautoapplies toall elements. ...
...al definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it. ...
...-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it. only the bottom one is offset.</p> p { text-decoration: underline wavy red; text-underline-offset: 1em; } .twolines { text-decoration-color: purple; text-decoration-line: underline overline; } specifications specification status comment css text decoration module level 4the definition of 'text-underline-offset' in that specification. working draft initial definition. ...

<body>: The Document Body element - HTML: Hypertext Markup Language
element of an <html> element. implicit aria role document permitted aria roles no role permitted dom interface htmlbodyelement the <body> element exposes the htmlbodyelement interface. you can access the <body> element through the document.body property. attributes this element includes the global attributes. alink color of text for hyperlinks when selected. this method is non-conforming, use css color property in conjunction with the :active pseudo-class instead. background uri of a image to use as a background. this method is non-conforming, use css background property on the element instead. bgcolor background color for the document. this method is non-conforming, use css background-color property on the eleme...
...or the document. this method is non-conforming, use css background-color property on the element instead. bottommargin the margin of the bottom of the body. this method is non-conforming, use css margin-bottom property on the element instead. leftmargin the margin of the left of the body. this method is non-conforming, use css margin-left property on the element instead. link color of text for unvisited hypertext links. this method is non-conforming, use css color property in conjunction with the :link pseudo-class instead. onafterprint function to call after the user has printed the document. onbeforeprint function to call when the user requests printing of the document. onbeforeunload function to call when the document is about to be unloaded. onblur function to call when...
...ion to call when the document has been resized. onstorage function to call when the storage area has changed. onundo function to call when the user has moved backward in undo transaction history. onunload function to call when the document is going away. rightmargin the margin of the right of the body. this method is non-conforming, use css margin-right property on the element instead. text foreground color of text. this method is non-conforming, use css color property on the element instead. topmargin the margin of the top of the body. this method is non-conforming, use css margin-top property on the element instead. vlink color of text for visited hypertext links. this method is non-conforming, use css color property in conjunction with the :visited pseudo-class instead...
... of '<body>' in that specification. recommendation obsoleted the formerly deprecated attributes. defined the behavior of the non-conforming and never standardized topmargin, leftmargin, rightmargin and bottommargin. added the on* attributes. html 4.01 specificationthe definition of '<body>' in that specification. recommendation deprecated the alink, background, bgcolor, link, text and vlink attributes. ...

<br>: The Line Break element - HTML: Hypertext Markup Language
note: do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the css margin property to control their size. ...
...riting a poem or an address, where the division of lines is significant. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as you can see from the above example, a <br> element is included at each point where we want the text to break. the text after the <br> begins again at the start of the next line of the text block. note: do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the css margin property to control their size. attributes this element's attributes include the global attributes. deprecated attributes clear indicates where to begin the next line after the break. ...
...se <br> to create margins between paragraphs; wrap them in <p> elements and use the css margin property to control their size. attributes this element's attributes include the global attributes. deprecated attributes clear indicates where to begin the next line after the break. styling with css the <br> element has a single, well-defined purpose — to create a line break in a block of text. as such, it has no dimensions or visual output of its own, and there is very little you can do to style it. you can set a margin on <br> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose. examples simple br in the following example we use <br> elements t...
... a bad practice — you should use the line-height property that was designed for that purpose. examples simple br in the following example we use <br> elements to create line breaks between the different lines of a postal address: mozilla<br> 331 e. evelyn avenue<br> mountain view, ca<br> 94041<br> usa<br> the result looks like so: accessibility concerns creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. screen readers may announce the presence of the element, but not any content contained within <br>s. this can be a confusing and frustrating experience for the person using the screen reader. use <p> elements, and use css properties like margin to control their spacing. tech...

<fieldset>: The Field Set element - HTML: Hypertext Markup Language
e of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. name the name associated with the group. note: the caption for the fieldset is given by the first <legend> element nested inside it. styling with css there are several special styling considerations for <fieldset>. its display value is block by default, and it establishes a block formatting context. if the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. by default there is a 2px groove border surrounding the contents, and a small amount of default padding. the element has min-inline-size: min-content by default. if a <legend> is present, it is placed over the block-start border. the <legend> shrink-wraps, and also ...
...d with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. by default there is a 2px groove border surrounding the contents, and a small amount of default padding. the element has min-inline-size: min-content by default. if a <legend> is present, it is placed over the block-start border. the <legend> shrink-wraps, and also establishes a formatting context. the display value is blockified. (for example, display: inline behaves as block.) there will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. if the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. if the <fieldset> is styled with display: flex or display: ...
...behaves as block.) there will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. if the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. if the <fieldset> is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. otherwise, it establishes a block formatting context. you can feel free to style the <fieldset> and <legend> in any way you want to suit your page design. examples simple fieldset this example shows a really simple <fieldset> example, with a <legend>, and a single control inside it. <form action="#"> <fieldset> <legend>simple fieldset</legend> <input type="radio" id="radio"> <...
...radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it. note how both the controls are disabled due to being inside a disabled <fieldset>. <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input type="text" id="name" value="chris"> </div> <div> <label for="pwd">archetype: </label> <input type="password" id="pwd" value="wookie"> </div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content. permitted content an optional <legend> element, followed by flow content. ...

<form> - HTML: Hypertext Markup Language
attribute on <input type=file> elements. accept-charset space-separated character encodings the server accepts. the browser uses them in the order in which they are listed. the default value means the same encoding as the page. (in previous versions of html, character encodings could also be delimited by commas.) autocapitalize a nonstandard attribute used by ios safari that controls how textual form elements should be automatically capitalized. autocapitalize attributes on a form elements override it on <form>. possible values: none: no automatic capitalization. sentences (default): capitalize the first letter of each sentence. words: capitalize the first letter of each word. characters: capitalize all characters — that is, uppercase. autocomplete indicates whether ...
...sion. this value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element. enctype if the value of the method attribute is post, enctype is the mime type of the form submission. possible values: application/x-www-form-urlencoded: the default value. multipart/form-data: use this if the form contains <input> elements with type=file. text/plain: introduced by html5 for debugging purposes. this value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements. method the http method to submit the form with. possible (case insensitive) values: post: the post method; form data sent as the request body. get: the get method; form data appended to the action url with a ?
...en submitted. if this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form. target indicates where to display the response after submitting the form. in html 4, this is the name/keyword for a frame. ...
...ton>, <input type="submit">, or <input type="image"> element belonging to the form. target indicates where to display the response after submitting the form. in html 4, this is the name/keyword for a frame. in html5, it is a name/keyword for a browsing context (for example, tab, window, or iframe). the following keywords have special meanings: _self (default): load into the same browsing context as the current one. _blank: load into a new unnamed browsing context. _parent: load into the parent browsing context of the current one. if no parent, behaves the same as _self. _top: load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). if no parent, behaves the same as _self. this value can be overridden by a fo...

<isindex> - HTML: Hypertext Markup Language
action this attribute determined the server url to which the query was sent. ...
... action this attribute determined the server url to which the query was sent. ...
...ery. its support depended on both the browser and the server to react to the query. <isindex> is removed html standard. it was deprecated in html 4.01. the same behaviour can be achieved with an html form. all major browsers have now removed <isindex>. attributes like all other html elements, this element accepted the global attributes. prompt this attribute added its value as a prompt for text field. action this attribute determined the server url to which the query was sent. example <head> <isindex prompt="search document..." action="/search"> </head> in past browsers, this would generate, at parse time, a dom tree equivalent to the following html: <form action="/search"> <hr> <label> search document... <input name="isindex"> </label> <hr> </form> history o...
.../label> <hr> </form> history on june 1992, dan connolly would prefer a different anchor type instead of isindex. on november 1992, indexes as links rather than documents started by dan connolly who is pushing the idea that indexes are more links than documents. in this thread, different type of solutions are proposed. the question of forms for making queries is mentioned in reference to dynatext browser: "the browser displays toggle buttons, text fields etc. the user fills in the fields, clicks ok, and the query results come up in the table of contents window." a thread about isindex in november 1992, kevin hoadley questioned the need for an isindex element and proposed to drop it. he proposed to have instead an input element (idea supported by steve putz). tim berners-lee explains the ...

<label> - HTML: Hypertext Markup Language
the html <label> element represents a caption for an item in a user interface. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. associating a <label> with an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. this means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered. you can click the associated label to focus/activate the input, as well as the i...
...tribute and a contained control element, as long as the for attribute points to the contained control element. styling with css there are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. you can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read. examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label. doing so makes it difficult for people to activate the form input ...
.../label> do <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> i agree to the terms and conditions </label> <p> <a href="terms-and-conditions.html">read our terms and conditions</a> </p> headings placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. ...
...ny kinds of assistive technology, because headings are commonly used as a navigation aid. if the label's text needs to be adjusted visually, use css classes applied to the <label> element instead. if a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>. don't <label for="your-name"> <h3>your name</h3> <input id="your-name" name="your-name" type="text"> </label> do <label class="large-label" for="your-name"> your name <input id="your-name" name="your-name" type="text"> </label> buttons an <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. doing so may actually interfere with how assistive technology parses the button input. the same applies for the <button> element. ...

<s> - HTML: Hypertext Markup Language
use the <s> element to represent things that are no longer relevant or no longer accurate. however, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories phrasing content or flow content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
...hrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. examples <s>today's special: salmon</s> sold out<br> <span style="text-decoration:line-through;">today's special: salmon</span> sold out accessibility concerns the presence of the s element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1p...
... screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } s::before { content: " [start of stricken text] "; } s::after { content: " [end of stricken text] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect understanding. short note on making your mark (more accessible) | th...
... living standard html5the definition of 's element' in that specification. ...