kerning - SVG: Scalable Vector Graphics
note: as a presentation attribute kerning can be used as a css property. in css the property is called font-kerning, though. ...
... note: as a presentation attribute kerning can be used as a css property. in css the property is called font-kerning, though. ...
... if a length is provided without a unit identifier (e.g., an unqualified number such as 128), the length is processed as a width value in the current user coordinate sy...
...And 3 more matches

SVG documentation index - SVG: Scalable Vector Graphics
t for the given filter primitive. it works exactly like the in attribute. 110 intercept needscompattable, svg, svg attribute the intercept attribute defines the intercept of the linear function of color component transfers when the type attribute is set to linear. 111 k deprecated, svg, svg attribute the k attribute specifies the amount for decreasing the spacing between the two glyphs in a kerning pair. 112 k1 filters, svg, svg attribute the k1 attribute defines one of the values to be used within the the arithmetic operation of the <fecomposite> filter primitive. 113 k2 filters, svg, svg attribute the k2 attribute defines one of the values to be used within the the arithmetic operation of the <fecomposite> filte...
...kernelunitlength attribute has two meanings based on the context it's used in. for lighting filter primitives, it indicates the intended distance for the x and y coordinates, for <feconvolvematrix>, it indicates the intended distance between successive columns and rows in the kernel matrix. 118 kerning deprecated, svg, svg attribute the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero). 119 keypoints svg, svg attribute the keypoints attribute indicates the simple duration of an animation. 120 keysplines svg, svg attri...
... is used in the animation. 122 lang svg, svg attribute the lang attribute specifies the primary language used in contents and attributes containing text content of particular elements. 123 lengthadjust svg, svg attribute the lengthadjust attribute controls how the text is stretched into the length defined by the textlength attribute. 124 letter-spacing svg, svg attribute the letter-spacing attribute controls spacing between text characters, in addition to any spacing from the kerning attribute. 125 lighting-color svg, svg attribute, svg filter the lighting-color attribute defines the color of the light source for lighting filter primitives. 126 limitingconeangle filters, svg, svg attribute the...
...And 3 more matches

font-variant-numeric - CSS: Cascading Style Sheets
roject, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...us a pull request. ...
...zero. <numeric-figure-values> these values control the figures used for numbers. two values are possible: lining-nums activating the set of figures where numbers are all lying on the baseline. it corresponds to the opentype values lnum. oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. it corresponds to the opentype values onum. <numeric-spacing-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the opentype values pnum. tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. it corresponds to the opent...
...And 2 more matches

Appendix D: Loading Scripts - Archive of obsolete content
overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects. javascript files or urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest. this is the method used by jetpack's securable module system to load nearly all executable code. advantages namespacing: since scripts executed via evalinsandbox run in a defined namespace, global namespace contamination and the resultant extension compatibility issues are not usually a problem. flexibility: the evalinsandbox method accepts several parameters, including the url, line number, and javascript version of the file from which the code being evaluated was extracted. this information is invaluable for de...
... as any properties of the global associated with the target object. these scripts execute with the same privileges and restrictions of the global associated with the target object, and this method can therefore also be used when with sandbox objects with the same effect as evalinsandbox and into content windows with the same effect as injecting script tags into their documents. advantages namespacing: global namespace contamination and the resultant extension compatibility issues can often be avoided by loading sub-scripts into private namespaces. flexibility: the sub-script loader can load scripts into a variety of different namespaces for a wide variety of uses, and as of gecko 2 allows the character set of the script to be specified. performance: as of gecko 8.0, scripts loaded via mozij...
...any times they are imported, this is one of the most performant methods of script loading. advantages performance: javascript modules are stored in a pre-compiled format in a cache, and therefore load with significantly less overhead than other types of scripts. additionally, scripts are loaded only once globally per session, and therefore have virtually no overhead for multiple imports. namespacing: javascript modules, like javascript components, are loaded into their own private scope. namespace contamination and the resulting compatibility issues are only an issue when they are imported into shared global namespaces. data sharing: as modules are loaded only once globally, every import has access to the same data and global variables no matter what context or window it was imported from. ...
... sharing: as modules are loaded only once globally, every import has access to the same data and global variables no matter what context or window it was imported from. javascript modules can therefor be used for communication and data sharing between otherwise isolated contexts. debugging: chromebug (at least) can list component.utils modules and single step through them. disadvantages namespacing: as modules always execute with their own namespace, they have no direct access to the dom or window properties of windows or documents, and therefore must often pass around references to these objects and any document-specific state data that they require. examples the following code will import a module into the current global scope. all variables named in the target script's exported_symbol...

Index - Archive of obsolete content
1252 hidepopup xul methods, xul reference no summary! 1253 increase xul methods, xul reference no summary! 1254 increasepage xul methods, xul reference no summary! 1255 insertitem xul methods, xul reference the id should match an element in the toolbar's toolbarpalette. ...
...ts using a tree. 1804 trees and templates tutorials, xul, xul_tutorial the following describes how to use a template with a tree. 1805 updating commands tutorials, xul, xul_tutorial in this section, we will look at how to update commands. 1806 using spacers tutorials, xul, xul_tutorial in this section, we will find out how to add some spacing in between the elements we have created. 1807 xbl attribute inheritance tutorials, xbl, xul, xul_tutorial no summary! 1808 xbl example tutorials, xbl, xul, xul_tutorial this section will describe an example xbl element. 1809 xbl inheritance tutorials, xbl, xul, xul_tutorial no summary! 1810 xpcom examples tutorials, xul...
...ng gap between elements. this type of separator should be used to separate parts of a dialog. it doesn't draw a bar visually, but is just a small space. it is functionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems). 1906 spacer xul elements, xul reference an element that takes up space but does not display anything. it is usually used to place spacing within a container. if you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. if you want a small gap, consider using a separator instead. 1907 spinbuttons xul elements, xul reference spin buttons are two arrows, one to increase a value and one to decrease a value. spin buttons are not used as separate elements, but are used in comb...
...non-standard, reference, recipe:css-property the -ms-scrollbar-track-color css property is a microsoft extension that specifies the color of the track element of a scrollbar. 2129 -ms-text-autospace css, css property, css:microsoft extensions, non-standard, reference, recipe:css-property the -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text. 2130 -ms-touch-select css, css property, css:microsoft extensions, non-standard, reference, recipe:css-property the -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection. 2131 -ms-wrap-flow css, css property, css:microsoft extensions, non-standa...

Index - Learn web development
n to style html using css beginner, css, codingscripting, debugging, landing, style, topic, length, specificity cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 103 css building blocks beginner, css, learn, building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at...
...'s most of what you need to understand about the box model. you may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout. 134 css first steps beginner, css, landing, learn, module, first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. 135 getting started with css beginner, css, classes, elements, example, learn, selectors, syntax,...
... styling text beginner, css, codingscripting, fonts, landing, links, module, text, font, letter, line, lists, shadow, web fonts with the basics of the css language covered, the next css topic for you to concentrate on is styling text — one of the most common things you'll do with css. ...
...l do with css. here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. 161 fundamental text and font styling article, beginner, css, guide, style, text, alignment, family, font, shorthand, spacing, weight we hoped you enjoyed playing with text in this article! the next article will give you all you need to know about styling html lists. 162 styling links article, beginner, css, focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about links — for now! the final article in ou...

MathML attribute reference - MathML
ed. use u+2044 (fraction slash) instead. unimplemented charalign <mstack> specifies the horizontal alignment of digits. close <mfenced> a string for the closing delimiter. columnalign <mtable>, <mtd>, <mtr>, <mlabeledtr> specifies the horizontal alignment of table cells. columnlines <mtable> specifies table column borders. columnspacing <mtable> specifies the space between table columns. columnspan <mtd> a non-negative integer value that indicates over how many table columns the cell extends. unimplemented columnwidth <mtable> specifies the width of table columns. unimplemented crossout <mscarry> specifies what kind of line is drawn to cross out carries. unimplemented d...
...ght. fence <mo> a boolean value specifying whether the operator is a fence (such as parentheses). there is no visual effect for this attribute. unimplemented form <mo> specifies the role of the operator in an enclosed expression. frame <mtable> specifies borders of an entire <mtable>. possible values are: none (default), solid and dashed. framespacing <mtable> specifies additional space added between the table and frame. unimplemented groupalign <maligngroup>, <mtable>, <mtd>, <mtr> height <mglyph>, <mpadded>, <mspace> specifies the desired height. see lengths for possible values. href all used to set a hyperlink to a specified uri. id all sets up a unique identifier associated...
...r names. mathcolor all the text color. you can use #rgb, #rrggbb and html color names. mathsize <mi>, <mn>, <mo>, <ms>, <mtext> the size of the content. mathvariant <mi>, <mn>, <mo>, <ms>, <mtext> the logical class of the identifier, which varies in typography. maxsize <mo> the maximum size of the operator. unimplemented minlabelspacing <mtable> a length value specifing the minimum space between a label and the adjacent cell in the row. minsize <mo> the minimum size of the operator. movablelimits <mo> specifies whether attached under- and overscripts move to sub- and superscript positions. notation <menclose> a list of notations, separated by white space, to apply to the child e...
.... unimplemented overflow <math> if an expression is too long to fit in the allowed width, this attribute sets the preferred handling. unimplemented position <msgroup>, <msrow>, <mscarries>, <msline> rowalign <mtable>, <mtd>, <mtr> specifies the vertical alignment of table cells. rowlines <mtable> specifies table row borders. rowspacing <mtable> specifies the space between table rows. rowspan <mtd> a non-negative integer value that indicates on how many rows does the cell extend. rspace <mo> the amount of space after the operator. rquote <ms> the closing quote mark (depends on dir) to enclose the content. the default value is "&quot;". scriptlevel <mstyle> control...

<mtable> - MathML
e values separated by space are allowed and apply to the corresponding columns (e.g. columnalign="left right center"). possible values are: left, center (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none none solid"). possible values are: none (default), solid and dashed. columnspacing specifies the space between table columns. unimplemented columnwidth specifies the width of table columns. displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. unimplemente...
... displaystyle is set to true. unimplemented equalcolumns a boolean value indicating whether to force all columns to have the same total height. false is default. unimplemented equalrows a boolean value indicating whether to force all rows to have the same total height. false is default. frame specifies borders of the entire table. possible values are: none (default), solid and dashed. ...
... rowalign specifies the vertical alignment of the cells. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowalign="top bottom axis"). ...
...s separated by space are allowed and apply to the corresponding rows (e.g. rowalign="top bottom axis"). possible values are: axis, baseline (default), bottom, center and top. rowlines specifies row borders. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowlines="none none solid"). possible values are: none (default), solid and dashed. unimplemented rowspacing specifies the space between table rows. unimplemented side specifies the position where <mlabeledtr> label elements should be placed. possible values are: left, right (default), leftoverlap and rightoverlap. width specifies the width of the entire table. accepts length values. examples alignment with row number rendering: <math> <mi>x</mi> <mo>=</mo> <mtable frame="solid" ...

SVG Attribute reference - SVG: Scalable Vector Graphics
fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength pat...
...-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues target tar...
... text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional...
...olor-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, wri...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
line implemented. ellipse implemented. polyline implemented. polygon implemented. text module text implemented. ...
... line implemented. ellipse implemented. polyline implemented. polygon implemented. text module text implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. var...
... attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. ...
...irection, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. ...

Index - Archive of obsolete content
521 hidepopup xul methods, xul reference no summary! 522 increase xul methods, xul reference no summary! 523 increasepage xul methods, xul reference no summary! 524 insertitem xul methods, xul reference the id should match an element in the toolbar's toolbarpalette. ...
...ts using a tree. 1073 trees and templates tutorials, xul, xul_tutorial the following describes how to use a template with a tree. 1074 updating commands tutorials, xul, xul_tutorial in this section, we will look at how to update commands. 1075 using spacers tutorials, xul, xul_tutorial in this section, we will find out how to add some spacing in between the elements we have created. 1076 xbl attribute inheritance tutorials, xbl, xul, xul_tutorial no summary! 1077 xbl example tutorials, xbl, xul, xul_tutorial this section will describe an example xbl element. 1078 xbl inheritance tutorials, xbl, xul, xul_tutorial no summary! 1079 xpcom examples tutorials, xul...
...ng gap between elements. this type of separator should be used to separate parts of a dialog. it doesn't draw a bar visually, but is just a small space. it is functionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems). 1175 spacer xul elements, xul reference an element that takes up space but does not display anything. it is usually used to place spacing within a container. if you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. if you want a small gap, consider using a separator instead. 1176 spinbuttons xul elements, xul reference spin buttons are two arrows, one to increase a value and one to decrease a value. spin buttons are not used as separate elements, but are used in comb...

Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 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. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. in that module, you will learn about: css, starting with the introduction to css module more ...
... covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained familiarity ...
...you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text with the basics of the css language covered, the next css topic for you to concentrate on is styling text — one of the most common things you'll do with css. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place in relation to the viewport,...

Accessibility information for UI designers and developers
see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough to allow for this. text sizing users should be able to enlarge their text size up to 200 percent without breaking functionality. ...
...nd custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough to allow for this. text sizing users should be able to enlarge their text size up to 200 percent without breaking functionality. ...
... sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough to allow for this. text sizing users should be able to enlarge their text size up to 200 percent without breaking functionality. text spacing users should be able to make the following changes to their text spacing: set line height (leading) to at least 1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface. forms in forms, provide labels for ...

MathML Demo: <mo> - operator, fence, separator, or accent
a ⋄ b ⪸ c a † b ⪷ c a ‡ b ∋ c a ⊞ b \vartriangle c arrows the following table contains instances of all arrows found on the swp arrows panel. the symbols occur in the context of a simple expression. in general, the lspace and rspace around arrows should be similar to the spacing around relations. there is an issue with the markup of "long" latex arrows in mathml. there are entities from these arrows, &xlarr; &xlarr; &xrarr; etc. but they have no standard unicodes. they can be viewed as stretched versions of short arrows. \longleftarrow can be scripted as <mo>&xlarr;</mo> or as <mo stretchy="true" minsize="1.8">&larr;</mo>. a ↑ b ← c ...
... a - b ⤎ c a + b ⇒ c a - b ⇐ c a + b ⇔ c negated relations the following table contains instances of all negated relations found on the swp panel. the symbols occur in the context of a simple expression. in general, the lspace and rspace around negated relations should be similar to the spacing around relations. a + b ≠ c ⋅ d a + b = c ⋅ d a - b ∉ c * d a - b ∈ c * d a + b ≨︀ c × d a + b ≦ c × d a - b ≩︀ c ÷ d a - b ≧ c ÷ d a + b ≰ c ⋅ d a - b ≱ c * d a +...
...ributes that configure an <mo> as a fence (fence, stretchy, symmetric, lspace, rspace). this is especially important for vertical arrows used as fences. the default attributes given in the mathml operator dictionary don't configure vertical arrows as fences. in latex, the lspace on a left side fence delimiter and the rspace on a right side fence delimiter is not 0. ...

Index - Web APIs
height at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image. 1722 htmlimageelement.hspace api, dom, html, html dom, htmlimageelement, horizontal, image, layout, obsolete, property, reference, hspace, img, left, margin, right, spacing the obsolete hspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img> element when laying out the page. 1723 htmlimageelement.ismap api, html, html dom, htmlimageelement, image map, link, reference, ismap, server-side the htmlimageelement proeprty ismap is a boolean value whic...
..., property, reference, interactive, usemap the usemap property on the htmlimageelement interface reflects the value of the html usemap attribute, which is a string providing the name of the client-side image map to apply to the image. 1734 htmlimageelement.vspace api, html, html dom, htmlimageelement, image, obsolete, property, reference, vertical, bottom, img, margin, space, spacing, top, vspace the obsolete vspace property of the htmlimageelement interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img> element when laying out the page. 1735 htmlimageelement.width api, html, html dom, htmlimageelement, image, property, reference, size, width the width property of the htmlimageelement interface indica...
... the htmltableelement.caption property represents the table caption. if no caption element is associated with the table, this property is null. 1915 htmltableelement.cellpadding api, html dom, needsspectable, property, reference the htmltableelement.cellpadding property represents the padding around the individual cells of the table. 1916 htmltableelement.cellspacing api, html dom, htmltableelement, needsspectable, obsolete, property, reference, cellspacing while you should instead use the css border-spacing property, the obsolete htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells. 1917 htmltableelement.createcaption() api, html dom, htmlta...

Using IIR filters - Web APIs
ent.createelement('canvas'); canvascontainer.appendchild(canvasel); // set 2d context and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on size const spacing = width/16; const fontsize = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize...
...cing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle = 'grey'; canvasctx.filltext('1', spacing-fontsize, spacing+fontsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i...
...pacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < magresponseoutput.length; i++) { if (i === 0) { canvasctx.moveto(spacing, height-(magresponseoutput[i]*100)-spacing ); } else { canvasctx.lineto((width/totalarrayitems)*i, height-(magresponseoutput[i]*100)-spacing ); } } canvasctx.stroke(); summary that's it for our iirfilter demo. this should have shown you how to use the basics, and helped you to understand what it's useful for and how it works. ...

CSS reference - CSS: Cascading Style Sheets
thborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-path...
...nt><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthma...
... basic selectors basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors. universal selector *, ns|*, *...

font-variant - CSS: Cascading Style Sheets
ylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions related to the font-variant-alternates longhand property. small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions related to the font-variant-caps longhand property. <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero specifies the keywords related to the font-variant-numeric longhand property. the possible values are: lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, and slashed-zero. <east-asian-variant-values>, <east-asian-width-values>, ruby specifies the keywords related to the font-var...
...ues> | <contextual-alt-values> | stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) | [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero | <east-asian-variant-values> | <east-asian-width-values> | ruby ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | ...
...> | ruby ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ]<feature-value-name> = <custom-ident><numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> ...

place-content - CSS: Cascading Style Sheets
er. if the property’s axis is not parallel with the inline axis, this value behaves like start. right the items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. if the property’s axis is not parallel with the inline axis, this value behaves like start. space-between the items are evenly distributed within the alignment container. the spacing between each pair of adjacent items is the same. the first item is flush with the main-start edge, and the last item is flush with the main-end edge. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set ...
... first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. space-around the items are evenly distributed within the alignment container. ...
...st baseline is start, the one for last baseline is end. space-around the items are evenly distributed within the alignment container. the spacing between each pair of adjacent items is the same. the empty space before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. stretch if the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalen...

<table>: The Table element - HTML: Hypertext Markup Language
ent. if the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the size of the space between two cells in a percentage value or pixels. the attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. to achieve a similar effect, a...
...bute defines the size of the space between two cells in a percentage value or pixels. the attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. to achieve a similar effect, apply the border-spacing property to the <table> element. border-spacing does not have any effect if border-collapse is set to collapse. frame this enumerated attribute defines which side of the frame surrounding the table must be displayed. to achieve a similar effect, use the border-style and border-width properties. rules this enumerated attribute defines where rules, i.e. lines, should appear in a t...
... this helps people navigating with the aid of assistive technology such as a screen reader, people expe...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
olor-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-sp...
...ls glyph orientation when the inline-progression-direction is vertical. value: auto|<angle>|inherit; animatable: no image-rendering it provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. value: auto|optimizequality|optimizespeed; animatable: yes kerning deprecated since svg 2 it indicates whether the browser should adjust inter-glyph spacing. value: auto|<length>|inherit; animatable: yes letter-spacing it controls spacing between text characters. value: normal|<length>|inherit; animatable: yes lighting-color it defines the color of the light source for filter primitives elements <fediffuselighting> and <fespecularlighting>. value: <color>; animatable: yes marker-end it defines the arrowhead or polymarker that will be drawn a...
...ied to an element and the element's children. value: <transform-list>; animatable: yes unicode-bidi - value:; animatable: - vector-effect specifies the vector effect to use when drawing an object. value: default|non-scaling-stroke|inherit|<uri>; animatable: yes visibility lets you control the visibility of graphical elements. value: visible|hidden|collapse|inherit; animatable: yes word-spacing specifies spacing behavior between words. value: <length>|inherit; animatable: yes writing-mode specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. value: lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; animatable: yes ...

The Box Model - Archive of obsolete content
ur css is directly related to images, where you'll usually handle measurements in pixels (px). also, just like in html, you can control the dimensions of inflexible elements using the width and height css properties and attributes. these attributes won't have any effect on flexible elements. margins, paddings and spacers margins and paddings are frequently used in both html and xul to define spacing between elements and inside of elements. the margin determines the space between an element and the elements surrounding it, while the padding determines the space between the borders of a container element and its child nodes, kind of like an inner margin. sometimes you also need to define flexible spaces between elements. in this case you should use a spacer element with a flex value. a spacer...
...zed: xulschoolhello.linkedtext.label = go to <a>our site</a> for more information the syntax is similar to html because it's easier to read this way, but string bundles won't do anything special with it. you'll have to break the string using regular expressions and generate 3 different labels, one with the text-link class. you'll also need to do some css work on the labels so that the inner spacing in the text looks right. another option is to take it up a notch and really use html. xulschoolhello.linkedtext.label = go to <html:a onclick="%s">our site</html:a> for more information to include html in a xul document, you need to add the namespace for it in the document root: <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.on...

CSS3 - Archive of obsolete content
defines the syntax of the content of the html style global attribute. css fonts module level 3 candidate recommendation since september 20th, 2018 amends the css2.1 font matching algorithm to be closer to what is really implemented. adds: support for downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css f...
... extends: the css text-transform property with the value full-width. the css text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text. the css text-align property with a <string> value to align on that character. this is useful to align number on the decimal point. the css word-spacing and letter-spacing properties with range constraints to control flexibility in justification. adds: control on how whitespaces are displayed using the css text-space-collapse and tab-size properties. control on line breaks and word boundaries using the css line-break, word-break, hyphens, text-wrap, overflow-wrap, and text-align-last properties. control on how justi...

jspage - Archive of obsolete content
ll;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling;(n)?l.parentnode.insertbefore(m,n):l.parentnode.appendchild(m);},bottom:function(m,l)...
...(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={margin:{},padding:{},bor...

Creating a Skin - Archive of obsolete content
the directory you created. make sure to add a slash at the end. copy the original findfile.css into the new directory. we'll use this as a basis for the new skin. we can then refer to it using the url 'chrome://findfile/skin/findfile.css'. adding style rules first, let's decide what kind of changes we want to make. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. let's start with the menus, toolbars and the overall tab panel. the following style rules added to findfile.css will cause the changes shown in the accompanying image. window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; borde...
...tton { list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button. the last rule applies to buttons when the mouse is hovering over them. we set the text color to dark blue in this case. finally, some minor changes to the spacing around the items, by setting margins: tabbox { margin: 4px; } toolbarbutton { margin-left: 3px; margin-right: 3px; } after those changes, the find files dialog now looks like the image. as you can see, some simple changes to the style rules has resulted in quite a different appearance to the find files dialog. we could continue by changing the menus, the grippies on the toolbar and t...

Windows Media in Netscape - Archive of obsolete content
ww.microsoft.com/windows/windowsmedia/download/default.asp } else { //control was correctly created //proceed with scripting calls, etc. } </script> note that if the control is correctly instantiated, you will know that it is a version of windows media player 7 and up, since the clsid used with the object element reflects the unique component in this version range. scripting the control namespacing issues are the most important distinction between scripting the windows media control in ie and netscape 7.1. in code deployed for ie, invocations of the sort player.controls.play(); are common, where player is the id of the object element. in netscape 7.1, plugins and activex controls are not exposed to the global namespace, but rather as properties of the document object. accessing properties a...
... this. summary: cross browser use of windows media player in ie and netscape 7.1 don't use proprietary dom sniffs such as looking for document.all-- this will rule out netscape 7.1. when scripting the player, ensure that you use the syntax document.playerelementname.property as opposed to playerelementname.property. merely adding document. as a prefix to player scripting calls solves the namespacing difference between netscape 7.1 and ie. both netscape 7.1 and ie handle the nonstandard html format script for event in script html tags. an example is the usage of close captioning. in the case of close captioning media content, the player api player.closedcaption.captioningid = "captext"; is not supported, and the workaround is to capture events fired by the media player in script using scrip...

How CSS is structured - Learn web development
according to personal preference. for team projects, you may find that a team or project has its own style guide. important: though white space separates values in css declarations, property names never have white space. for example, these declarations are valid css: margin: 0 auto; padding-left: 10px; but these declarations are invalid: margin: 0auto; padding- left: 10px; do you see the spacing errors? first, 0auto is not recognized as a valid value for the margin property. the entry 0auto is meant to be two separate values: 0 and auto. second, the browser does not recognize padding- as a valid property. the correct property name (padding-left) is separated by an errant space. you should always make sure to separate distinct values from one another by at least one space. keep propert...
...the entry 0auto is meant to be two separate values: 0 and auto. second, the browser does not recognize padding- as a valid property. the correct property name (padding-left) is separated by an errant space. you should always make sure to separate distinct values from one another by at least one space. keep property names and property values together as single unbroken strings. to find out how spacing can break css, try playing with spacing inside your test css. what's next? it's useful to understand how the browser uses html and css to display a webpage. the next article, how css works, explains the process. previous overview: first steps next in this module what is css? getting started with css how css is structured how css works using your new knowledge ...

Typesetting a community school homepage - Learn web development
fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-size of 10px. give your headings and other element types appropriate font-sizes defined using a suitable relative unit. give your body text a suitable line-height. center your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as appropriate. give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px. links: give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of ...
...nks are underlined by default, but when you hover or focus them, the underline disappears. remove the default focus outline from all the links on the page. give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design. make it so that external links have the external link icon inserted next to them. lists: make sure the spacing of your lists and list items works well with the styling of the overall page. each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs. give your list items a nice bullet, appropriate for the design of the page. it is up to you whether you choose a custom bullet image or something else. ...

Styling text - Learn web development
we round off the module by looking at applying custom fonts to your page, and styling lists and links. ...
...such as jsbin, codepen or glitch. guides this module contains the following articles, which will teach you all of the essentials behind styling html text content. fundamental text and font styling in this article we go through all the basics 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. styling lists lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider. this article explains all. styling links when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied int...

CSS basics - Learn web development
between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set font sizes for elements that will have text inside the html body (<h1>, <li>, and <p>). we'll also center the heading. finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable. h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; } adjust the px values as you like. your work-in-progress should look similar to this: css: all about boxes something you'll notice about writing css: a lot of it is about boxes. this includes setting size, color, and position. most htm...
...s the appearance. centering the image img { display: block; margin: 0 auto; } next, we center the image to make it look better. we could use the margin: 0 auto trick again as we did for the body. but there are differences that require an additional setting to make the css work. the <body> is a block element, meaning it takes up space on the page. a block element can have margin and other spacing values applied to it. in contrast, images are inline elements. it is not possible to apply margin or spacing values to inline elements. so to apply margins to the image, we must give the image block-level behavior using display: block;. note: the instructions above assume that you're using an image smaller than the width set on the body. (600 pixels) if your image is larger, it will overflow th...

Aprender y obtener ayuda - Learn web development
color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer. implement a horizontal navigation menu etc. then you could break it down further, for example, "implement horizontal navigation menu" could be written out as: make a list of menu items sit horizontally in a line. remove unneeded defaults, like list spacing and bullet points. style hover/focus/active states of menu items appropriately. make the menu items equally spaced along the line. give the menu items enough vertical spacing. make sure the text is centered inside each menu item etc. each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. now you've just got to go through and solve them al...
... if you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. if you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot...

Mozilla’s UAAG evaluation report
(p2) vg html 4.01: vg css 1: vg css 2: vg dom 1.0...
...(p2) vg html 4.01: vg css 1: vg css 2: vg dom 1.0: vg guideline 9. ...

SVGTextContentElement - Web APIs
2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadjust_unknown 0 some other value. lengthadjust_spacing 1 the spacing keyword. lengthadjust_spacingandglyphs 2 the spacingandglyphs keyword. properties this interface also inherits properties from its parent, svggraphicselement. svgtextcontentelement.textlength read only an svganimatedlength reflecting the textlength attribute of the given element. svgtextcontentelement.lengthadjust read only an svganimatedenumerat...
...gtextcontentelement.getcomputedtextlength() returns a float representing the computed length for the text within the element. svgtextcontentelement.getsubstringlength() returns a float representing the computed length of the formatted text advance distance for a substring of text within the element. note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the css 'letter-spacing' and 'word-spacing' properties. visual spacing adjustments made by the 'x' attribute is ignored. svgtextcontentelement.getstartpositionofchar() returns a dompoint representing the position of a typographic character after text layout has been performed. note: in svg 1.1 this method returned an svgpoint. svgtextcontentelement.getendpositionofchar() return...

SVGTextPathElement - Web APIs
name value description textpath_methodtype_unknown 0 the type is not one of predefined types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. textpath_methodtype_align 1 corresponds to the value align. textpath_methodtype_stretch 2 corresponds to the value stretch. spacing types name value description textpath_spacingtype_unknown 0 the type is not one of predefined types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. textpath_spacingtype_auto 1 corresponds to the value auto. textpath_spacingtype_exact 2 corresponds to the value exact. ...
...ties of svgurireference. svgtextpathelement.startoffset read only an svganimatedlength corresponding to the x component of the startoffset attribute of the given element. svgtextpathelement.method read only an svganimatedenumeration corresponding to the method attribute of the given element. it takes one of the textpath_methodtype_* constants defined on this interface. svgtextpathelement.spacing read only an svganimatedenumeration corresponding to the spacing attribute of the given element. it takes one of the textpath_spacingtype_* constants defined on this interface. methods this interface does not provide any specific methods, but implements those of its parent, svgtextcontentelement, and also implements methods of svgurireference. specifications specification statu...

::first-line (:first-line) - CSS: Cascading Style Sheets
syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. see what...
... syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. see what i mean?</p> <s...

Typical use cases of Flexbox - CSS: Cascading Style Sheets
f the common use cases for flexbox — those places where it makes more sense than another layout method. why choose flexbox? in a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. as you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. these are the uses that flexbox was designed for. you can read more about the difference between flexbox and css grid layout in relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of css layout. in reality we also often use flexbox for jobs that might be better done by grid layout, as a fallback for grid, and also in order to...
...as it seems, was difficult to achieve before flexbox. it forms the most simple of flexbox examples, and could be considered the ideal flexbox use case. when we have a set of items that we want to display horizontally, we may well end up with additional space. we need to decide what to do with that space, and have a couple of options. we either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space. space distributed outside the items to distribute the space between or around the items we use the alignment properties in flexbox, and the justify-content property. you can read more about this property in aligning ...

CSS Fonts - CSS: Cascading Style Sheets
height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. p { width: 600px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. reference prop...
...-feature-settings font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we 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. opentype font features guide font features or variants refer to different glyphs or character styles contained within an opentype font. these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. these are all referred to as opentype...

Animatable CSS properties - CSS: Cascading Style Sheets
font-size font-size-adjust font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-border mask-position mask-size max-block-size max-height max-inline-size max-lines max-width min-block-size min-height m...
... scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom ...

align-content - CSS: Cascading Style Sheets
ne alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. space-between the items are evenly distributed within the alignment container along the cross axis. the spacing between each pair of adjacent items is the same. the first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis. space-around the items are evenly distributed within the alignment container along the cross axis. the spacing between each pair of adjacent items is the same. the emp...
...e cross axis. space-around the items are evenly distributed within the alignment container along the cross axis. the spacing between each pair of adjacent items is the same. the empty space before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container along the cross axis. the spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same. stretch if the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (o...

justify-content - CSS: Cascading Style Sheets
ine alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. space-between the items are evenly distributed within the alignment container along the main axis. the spacing between each pair of adjacent items is the same. the first item is flush with the main-start edge, and the last item is flush with the main-end edge. space-around the items are evenly distributed within the alignment container along the main axis. the spacing between each pair of adjacent items is the same. the empty space before the first and after the last item equals half of the space betwee...
... main-end edge. space-around the items are evenly distributed within the alignment container along the main axis. the spacing between each pair of adjacent items is the same. the empty space before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container along the main axis. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. stretch if the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/m...

margin-trim - CSS: Cascading Style Sheets
containers. ...
...instead, margin-trim could fix it: article { margin-trim: in-flow; ... ...

CSS: Cascading Style Sheets
r? we have put together a course that includes all the essential information you need to work towards your goal. get started tutorials our css learning area features multiple modules that teach css from the ground up — no previous knowledge required. css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained familiarity ...
...you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text with the basics of the css language covered, the next css topic for you to concentrate on is styling text — one of the most common things you'll do with css. here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place concerning the viewport, an...

<br>: The Line Break element - HTML: Hypertext Markup Language
lobal 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 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: acce...
...graphs 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. technical summary 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. in xhtml documents, write this element as <br />. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role ...

Responsive Navigation Patterns - Progressive web apps (PWAs)
a toggle menu, and the user has to tap to expand the toggle menu. you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
...veral items stay on the bottom of the screen, and the rest of the items are hidden. the user can flip the menu open and select from the rest of the navigation items. you could select the items that remain on the bottom. ...

lengthAdjust - SVG: Scalable Vector Graphics
the lengthadjust attribute controls how the text is stretched into the length defined by the textlength attribute. four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only. </text> <text x="0" y="50" textlength="300" lengthadjust="spacingandglyphs"> stretched using spacing and glyphs. </text> <text x="0" y="80" textlength="100" lengthadjust="spacing"> shrunk using spacing only. </text> <text x="0" y="110" textlength="100" lengthadjust="spacingandglyphs"> shrunk using spacing and glyphs. </text> ...
...x="0" y="50" textlength="300" lengthadjust="spacingandglyphs"> stretched using spacing and glyphs. </text> <text x="0" y="80" textlength="100" lengthadjust="spacing"> shrunk using spacing only. </text> <text x="0" y="110" textlength="100" lengthadjust="spacingandglyphs"> shrunk using spacing and glyphs. </text> </g> </svg> usage notes value spacing | spacingandglyphs default value spacing animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'lengthadjust' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'lengthadjust' in that specifica...

<textPath> - SVG: Scalable Vector Graphics
r the lazy dog. </textpath> </text> </svg> attributes href the url to the path or basic shape on which to render the text. if the path attribute is set, href has no effect. value type: <url> ; default value: none; animatable: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes method which method to render individual glyphs along the path. value type: align|stretch ; default value: align; animatable: yes path the path on which the text should be rendered. value type: <path_data> ; default value: none; animatable: yes side which side of the path the text should be rendered. value type: left|right ; defau...
... value type: auto|exact ; default value: exact; animatable: yes startoffset how far the beginning of the text should be offset from the beginning of the path. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes textlength the width of the space into which the text will render. ...

Tutorials
s basics takes you through what you need to get started. we'll answer questions like: how do i make my text black or red? how do i make my content show up in such-and-such a place on the screen? how do i decorate my webpage with background images and colors? css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained famil...
...nits, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. common css questions common questions and answers for beginners. intermediate level css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside...

Embedding SVG - Archive of obsolete content
svg is an xml based makeup language and can be embedded into other markup languages, like xhtml and xul. embedding in xhtml make sure you use the right namespace when embedding. notice the template and example use xhtml to handle the namespacing. <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- html and svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ...

Handling Preferences - Archive of obsolete content
ssage.count", 0); this defines a preference we'll use to keep track of the amount of times we have displayed a greeting message to the user. its default value is 0. you'll see this preference appear in about:config after installing the extension. just type "xulschool" in the filter box to see your new preference. note: always begin your preference names with "extensions", followed by some namespacing and finally the actual name of the preference. name parts are normally separated by dots. now let's look at how we actually manage the preference values. managing preferences with xpcom we use the preferences service in order to get and set preference values: this._prefservice = cc["@mozilla.org/preferences-service;1"].getservice(ci.nsiprefbranch); // ... get count() { return this._pref...

JavaScript Object Management - Archive of obsolete content
n like this: var exported_symbols = ["〈modulenamespace〉"]; exported_symbols is a special identifier that tells firefox that this file is only publishing the object named 〈modulenamespace〉. several objects, functions and variables can be declared on this file, but the only object visible from the outside will be 〈modulenamespace〉, which is a namespace in our case. because of namespacing, we don't need to worry much about what to export, usually we just need the namespace object. all of the objects inside of it are exported as well, since they are members of the 〈modulenamespace〉 object. module files can be imported to a chrome script or to other code modules with the following line: components.utils.import("resource://xulschoolhello/messagecount.js"); when using comp...

The Essentials of an Extension - Archive of obsolete content
the namespace, which is something you should always define in your xul root element. it says that this node and all child nodes are xul. you only need to change namespace declarations when you mix different types of content in the same document, such as xul with html or svg. you may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. this is the namespacing standard that we use to avoid conflicts with firefox and other extensions, as well as making some development tasks easier. we namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. if we used generic ids like container or input, they will likely conflict with ids used within firefox, or with ids from other extension over...

XML data - Archive of obsolete content
more details other values of display display the element like a list item, or like a component of a table. for the full list of display types, see the display property in the css specification. using css alone, the structure of the display must be the same as the structure of the document. other technologies can modify the struct...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
-intense designs, is to convert the image from being an inline element to a block-level element. do that, and it no longer generates a line box, and so the problem goes away-- assuming that the image is the only thing that occupies that table cell. in the simplest case, we might add a style like this: td img {display: block;} consider this rule when applied to the following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table. within the textthere is an icon <img src="icon2.gif"> that indica...

Table Layout Regression Tests - Archive of obsolete content
.rgd. for appendcells1.html a file appendcells1.rgd will be created in the baseline or verify subdirectory. ...

insertItem - Archive of obsolete content
ermanent item. otherwise, if the beforepermanent argument is false, the new item is added to the end of the toolbar. the third argument can be used to wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. some special ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar. spacer: a non-flexible space. spring: a flexible space. the method returns the dom element for the created item. ...

Adding HTML Elements - Archive of obsolete content
es above will not display, each for a different reason. case 1 po is not a valid html tag and mozilla has no idea what to do with it. case 2 div is valid but only in html. to get it to work, you will need to add the html: qualifier. case 3 a description element is only valid in xul and not in html. it should not have the html: qualifier. next, we will learn how to adding spacing between elements. « previousnext » ...

Adding more elements - Archive of obsolete content
<menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog. the first spacer adds extra spacing in between the title label and the search criteria elements. it might look nicer if there was a border around the search criteria. there are two ways to do this. we could use the css border property or we could use the groupbox element. this first method would require that we set the style on the box itself. we will use the latter method, however. a groupbox has the advantage that it draws a box ...

Templates - Archive of obsolete content
ed elements will be created for each row. rules in the image of the earlier example, you may have noticed that the third button is simply a button with hyphens on it. this is a separator in the bookmark list. in the way that we have been using it, the rdf bookmarks datasource supplies the separators as if they were just regular bookmarks. what we would really like to do is add a small amount of spacing instead of a button for separator resources. that means that we want to have two different types of content be created, one type for regular bookmarks and a second type for separators. we can do this by using the rule element. we define a rule for each variation of elements that we want to have created. in our case, we would need a rule for bookmarks and a rule for separators. attributes placed ...

Using Spacers - Archive of obsolete content
adding spacers one of the problems with developing user interfaces is that each user has a different display. some users may have larger displays with higher resolutions and others may have lower resolutions. in addition, different platforms may have special requirements on the user interface. if adding support for multiple languages, the text for one language may require more room than another. applications that need to support multiple platforms and languages usually have their windows laid out with lots of space to allow for this. ...

spacer - Archive of obsolete content
if you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. if you want a small gap, consider using a separator instead. more information is available in the xul tutorial. ...

toolbar - Archive of obsolete content
ermanent item. otherwise, if the beforepermanent argument is false, the new item is added to the end of the toolbar. the third argument can be used to wrap the new item in another element. usually, the last argument will be null as it is mainly for the use of the customize dialog. the id should match an element in the toolbar's toolbarpalette. some special ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar. spacer: a non-flexible space. spring: a flexible space. the method returns the dom element for the created item. inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(...

toolbarpalette - Archive of obsolete content
ference home [ examples | attributes | properties | methods | related ] firefox only the item is a palette of available toolbar items. it is not displayed, but is used by the toolbar customization dialog to display the list of items. the children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be added to the toolbar. do not add the various spacing items, as those are added automatically. you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette. examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&m...

-ms-text-autospace - Archive of obsolete content
the -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none no effect takes place; that is, no extra space is added. this is the default value. ideograph-alpha creates extra spacing between runs of ideographic and non-ideographic text, such as latin-based, cyrillic, greek, arabic, or hebrew text. ideograph-numeric creates extra spacing between runs of ideographic text and numeric characters. ideograph-parenthesis creates extra spacing between a normal (non-wide) parenthesis and an ideograph. ideograph-space extends the width of the space character when it is adjac...

CSS - Archive of obsolete content
ss property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-track-colorthe -ms-scrollbar-track-color css property is a microsoft extension that specifies the color of the track element of a scrollbar.-ms-text-autospacethe -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.-ms-touch-selectthe -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.-ms-wrap-flowthe -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a micros...

Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
bject is the margin box of the box the property is set on, using the writing mode of that box. for justify-content and align-content, the writing mode of the box is also used. the definition of the alignment subject depends on the layout mode being used. block containers (including table cells) the entire content of the block as a single unit. multicol containers the column boxes, with any spacing inserted between column boxes added to the relevant column gaps. flex containers for justify-content, the flex items in each flex line. for align-content, the flex lines. note, this only has an effect on multi-line flex containers. grid containers the grid tracks in the appropriate axis, with any spacing inserted between tracks added to the relevant gutters. collapsed gutters are treated as ...

Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
e cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. in the case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows. learn more property reference align-content align-items align-self flex-wrap flex-direction flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css flexbox guide: mastering wrapping of flex items ...

Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
uard api, codingscripting, glossary, guard guard is a feature of headers objects (as defined in the fetch spec, which affects whether methods such as set() and append() can change the header's contents. for example, immutable guard means that headers can't be changed. for more information, read fetch basic concepts: guard. 189 gutters css grids gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. 190 gzip compression glossary, compression, gzip gzip is a file format used for file compression and decompression. it is based on the deflate algorithm that allows files to be made smaller in size which allows for faster network transfers. gzip is ...

CSS and JavaScript accessibility best practices - Learn web development
tures to consider. "standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc. to make your text logical, legible, and comfortable to read. make sure your headings stand out from your body text, typically big and bold like the default styling. your lists should look like lists. your text color should contrast well with your background color. see html text fundamentals and styling text for more information. emphasised text inline markup that confers specific emph...

HTML: A good basis for accessibility - Learn web development
e a laborious task. webaim: "skip navigation" links how–to: use skip navigation links - the a11y project mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 | w3c understanding wcag 2.0 proximity large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them. this spacing is beneficial for people who suffer from fine motor control issues and may accidentally activate the wrong interactive content while navigating. spacing may be created using css properties such as margin. hand tremors and the giant-button-problem - axess lab test your skills! you've reached the end of this article, but can you remember the most important information? see test your skills: ...

HTML: A good basis for accessibility - Learn web development
e a laborious task. webaim: "skip navigation" links how–to: use skip navigation links - the a11y project mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 | w3c understanding wcag 2.0 proximity large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them. this spacing is beneficial for people who suffer from fine motor control issues and may accidentally activate the wrong interactive content while navigating. spacing may be created using css properties such as margin. hand tremors and the giant-button-problem - axess lab test your skills! you've reached the end of this article, but can you remember the most important information? see test your skills: ...

Introduction to CSS layout - Learn web development
ent's parent element. in the example below we float a <div> left, and give it a margin on the right to push the text away from the element. this gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design. floats example body { width: 90%; max-width: 900px; margin: 0 auto; } p { line-height: 2; word-spacing: 0.1rem; } .box { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; border-radius: 5px; } <h1>simple float example</h1> <div class="box">float</div> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id metus ut, rutrum luctus orci. cras po...

CSS first steps - Learn web development
this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. 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. ...

Web fonts - Learn web development
es are correct, so add fonts/ to the start of each path (adjust as necessary). now you can use these fonts in your font stacks, just like any web safe or default system font. for example: font-family: 'zantrokeregular', serif; you should end up with a demo page with some nice fonts implemented on them. because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to sort out the look and feel. note: if you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished.html and web-font-finished.css (run the finished example live). using an online font service online font services generally store and serve fonts for you, so you don't have to worry about writing the @font-face code, an...

Advanced form styling - Learn web development
} .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } the second, slightly more major issue is that you don't have control over the box that appears containing the options when you click on the <select> box to open it. you'll notice that the options don't inherit the font set on the parent. you also can't consistently set things like spacing and colors. for example, firefox will apply color and background-color when set on the <option> elements, chrome won't. neither of them will apply any kind of spacing (e.g. padding). the same is also true of the autocomplete list that appears for the datalist. if you really need full control over the option styling, you'll have to either use some kind of library to generate a custom control, or ...

Dealing with files - Learn web development
ktop, in your home folder, or at the root of your hard drive. choose a place to store your website projects. inside your chosen place, create a new folder called web-projects (or similar). this is where all your website projects will live. inside this first folder, create another folder to store your first website in. call it test-site (or something more imaginative). an aside on casing and spacing you'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. this is because: many computers, particularly web servers, are case-sensitive. so for example, if you put an image on your website at, test-site/myimage.jpg and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work. browsers, web se...

What will your website look like? - Learn web development
formation are you presenting on the subject? write a title and a few paragraphs and think of an image you'd like to show on your page. what does your website look like, in simple high-level terms? what's the background color? what kind of font is appropriate: formal, cartoony, bold and loud, subtle? note: complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. this is sometimes called a design guide, design system, or brand book, and you can see an example at the firefox photon design system. sketching out your design next, grab pen and paper and sketch out roughly how you want your site to look. for your first simple webpage, there's not much to sketch out, but you should get in the hab...

Getting started with HTML - Learn web development
phasis elements such as <em> or <strong>. consider the following example: <em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p> <em> is an inline element. as you see below, the first three elements sit on the same line, with no space in between. on the other hand, <p> is a block-level element. each p element appears on a new line, with space above and below. (the spacing is due to default css styling that the browser applies to paragraphs.) note: html5 redefined the element categories: see element content categories. while these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than block and inline. this article will stay with these two terms. note: the terms block and in...

HTML table advanced features and accessibility - Learn web development
ifically on styling tables). ...

What is JavaScript? - Learn web development
but it is amazing what you can achieve with a few lines of javascript code.) the three layers build on top of one another nicely. let's take a simple text label as an example. ...

Styling Vue components with CSS - Learn web development
? </label> </h2> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" v-model.lazy.trim="label" class="input__lg" /> <button type="submit" class="btn btn__primary btn__lg"> add </button> </form> </template> let's also add the stack-large class to the <ul> tag in our app.vue file. this will help improve the spacing of our to-do items a bit. update it as follows: <ul aria-labelledby="list-summary" class="stack-large"> adding scoped styles the last component we want to style is our todoitem component. to keep the style definitions close to the component we can add a <style> element inside it. however, if these styles alter things outside of this component, it could be challenging to track down the styles ...

Handling common HTML and CSS problems - Learn web development
ames it uses clashes with one you've already used for a different purpose. or you might find that html generated by some kind of third party api (generating ad banners, for example) includes a class name or id that you are already using for a different purpose. to ensure this doesn't happen, you need to research the tools you are using first and design your code around them. it is also worth "namespacing" css, e.g. if you have a widget, make sure it has a distinct class, and then start the selectors that select elements inside the widget with this class, so conflicts are less likely. for example .audio-player ul a. validation for html, validation involves making sure all your tags are properly closed and nested, you are using a doctype, and you are using tags for their correct purpose. a good ...

The Firefox codebase: CSS Guidelines
time, the common component already follows the a11y/theme standards defined in this guide. so, when possible, always prefer editing common components to writing your own. also, it is good practice to introduce a common class when the new element you are styling reuses some styles from another element, this allows the maintenance cost and the amount of code duplication to be reduced. formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within color functions: linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important. omit units on 0 values do this: margin: 0; not this: margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the short...

Following the Android Toasts Tutorial from a JNI Perspective
for example, if the class is blah.foo.bar then the signature of this will be this in slash notation with an l and ; around it. so this would be lblah/foo/bar;. if there is a sub class such as blah.foo.bar.subclass then a dollar sign is used in the slash notation, so this would be lblah/foo/bar$subclass;. when declaring methods, the signatures of the types go right next to each other without any spacing. the arguments are within the parenthesis, and the return type is immediately following. more on this later. so let us now declare the types for our toast example. we see we have three classes and two basic types (int and void). the class signature is looked up on the android documentation. for instance, we go to android reference :: context and we see: we see that the signature in dot notati...

Mozilla MathML Status
implemented. msup implemented. msubsup implemented. munder implemented. mover implemented. munderover implemented. mmultiscripts implemented. tabular math element [- attribute] notes mtable implemented. mtable - alignmentscope not implemented. see bug 122253. mtable - columnspacing, rowspacing, framespacing implemented. see bug 330964. mtable - columnwidth not implemented. see bug 958953. mtable - equalrows, equalcolumns not implemented. see bug 958954. mtable - side, minlabelspacing not implemented. see bug 356870. mtr implemented. mlabeledtr not implemented. see bug 689641. mtd implemented. ...

Mozilla Quirks Mode Behavior
2.1) in quirks mode absmiddle (handled incorrectly?) and middle (perhaps incorrectly as well?) are accepted as values of align on table cells, and absmiddle, abscenter, and middle are supported on tables (treated the same as center). removed in bug 559834 and bug 573322, though middle and absmiddle in table cells work in all modes now. in quirks mode, percentage values are supported on the cellspacing attribute, but treated as pixels (bug 106336). obsolete since gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) this quirk has been adopted in standards mode now. frames in quirks mode marginwidth and marginheight on a frame are propagated to the contained body. in a frameset cols/rows specification 0* is treated as 1* (see bug 40383). obsolete the scrolling attribute on fram...

DOM Inspector FAQ - Firefox Developer Tools
t in the dom generated by the original document. okay, what if i don't want to see those anonymous nodes? you can hide anonymous nodes in inspector by unchecking the view > show anonymous content menu item. i see a lot of empty #text nodes that i don't see in the original document. what are they, why are they there, and how can i get rid of them? those text nodes are actually the newlines and spacing between the elements. please see bug 26179 for a lengthy discussion of why they are there. the good news is, you can hide these whitespace nodes in inspector by unchecking the view > show whitespace nodes menu item. note that not all empty text nodes will be hidden. those nodes whose white-space css property value prevents the user-agent from collapsing sequences of whitespace will not be hidden...

console - Web APIs
ws (at least, in firefox — they may differ in other browsers): background and its longhand equivalents. border and its longhand equivalents border-radius box-decoration-break box-shadow clear and float color cursor display font and its longhand equivalents line-height margin outline and its longhand equivalents padding text-* properties such as text-transform white-space word-spacing and word-break writing-mode note: the console message behaves like an inline element by default. to see the effects of padding, margin, etc. you should set it to for example display: inline-block. using groups in the console you can use nested groups to help organize your output by visually combining related material. to create a new nested block, call console.group(). the console.groupcol...

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
the firefox devtools html inspector will highlight text nodes, and also show you exactly what area the elements are taking up — useful if you are wondering what is causing the problem, and are maybe thinking you've got some extra margin in there or something! there are a few ways of getting around this problem: use flexbox to create the horizontal list of items instead of trying ...

Element: auxclick event - Web APIs
ntext menu from popping up after the color change is applied. html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice). specification specification status ui eventsthe definition of 'auxclick' in that specification. working draft ...

HTMLDListElement - Web APIs
stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmldlistelement.compact is a boolean indicating that spacing between list items should be reduced. methods no specific methods; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmldlistelement' in that specification. living standard html5the definition of 'htmldlistelement' in that specification. recommendation no change fro...

HTMLOListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line-height css property used for that behavior in modern pages. methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlolistelement' in that specific...

HTMLTableElement - Web APIs
e obsolete bgcolor attribute. htmltableelement.border is a domstring containing the width in pixels of the border of the table. it reflects the obsolete border attribute. htmltableelement.cellpadding is a domstring containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. it reflects the obsolete cellpadding attribute. htmltableelement.cellspacing is a domstring containing the width in pixels of the horizontal and vertical separation between cells. it reflects the obsolete cellspacing attribute. htmltableelement.frame is a domstring containing the type of the external borders of the table. it reflects the obsolete frame attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "b...

HTMLUListElement - Web APIs
ent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlulistelement.type is a domstring value reflecting the type and defining the kind of marker to be used to display. the values are browser dependent and have never been standardized. htmlulistelement.compact is a boolean indicating that spacing between list items should be reduced. this property reflects the compact attribute only, it doesn't consider the line-height css property used for that behavior in modern pages. methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlulistelement' in that specific...

Timing element visibility with the Intersection Observer API - Web APIs
10px; } aside ul { padding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen. if you change this to -1, it will appear on the right (although some other elements will need some adjustments made to their margins to get the spacing just right). the grid-row is set to 2, to place it alongside the site body. the content body speaking of the site's body: the main content of the site is kept in a <main> element. the following style is applied to that: main { grid-column: 2; grid-row: 2; margin: 0; margin-left: 16px; font-size: 16px; } the primary feature here is that the grid position is set to place the body cont...

KeyframeEffect.getKeyframes() - Web APIs
rmat: property value pairs as many property value pairs as are contained in each keyframe of the animation. offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. this will be null if the keyframe is automatically spaced using keyframeeffect.spacing. computedoffset the computed offset for this keyframe, calculated when the list of computed keyframes was produced according to keyframeeffect.spacing. unlike offset, above, the computedoffset is never null. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specifi...

::first-letter (:first-letter) - CSS: Cascading Style Sheets
all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the fir...

Box alignment in Flexbox - CSS: Cascading Style Sheets
s. as soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space. the gap properties row-gap column-gap gap creating fixed size gaps between items on the main axis, the column-gap property will create fixed size gaps between adjacent items. on the cross axis the row-gap property will create spacing between adjacent flex lines, therefore flex-wrap must also be set to wrap for this to have any effect. reference css properties justify-content align-content place-content justify-items align-items place-items align-self row-gap column-gap gap glossary entries cross axis main axis guides alignment in flexbox external resources box alignment cheatsheet css grid, ...

Box alignment in Multi-column Layout - CSS: Cascading Style Sheets
t subject is the column box. the properties which apply to multi-column layouts are detailed below. note: multi-column layout predates the box alignment specification. and the properties listed here, while specified for multicol, may not be supported in browsers. align-content and justify-content the align-content property applies to the block axis and justify-content to the inline axis. any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the column-gap property. using a value of justify-content other than normal or stretch will cause column boxes to display at the column-width specified on the multicol container, and the remaining space distributed according to the value o...

Styling Columns - CSS: Cascading Style Sheets
how to change the gap and style rules between columns. can i style the column boxes? sadly, not at present. the anonymous boxes that make up your columns can’t be targeted in any way, meaning it isn’t possible to change a box's background color or have one column larger than the others. perhaps in future versions of the specification it might be. for now, however, we are able to change the spacing and add lines between columns. the column-gap property the gap between our columns is controlled by the column-gap property. this property was originally defined in the multi-column layout specification. however, it is now defined in box alignment in order to unify gaps between boxes in other specifications such as css grid layout. the initial value of column-gap in multicol is 1em. this means...

CSS Multi-column Layout - CSS: Cascading Style Sheets
spanning and balancing how to make elements span across all columns and controlling the way columns are filled. handling overflow in multicol what happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container. content breaks in multicol introduction to the fragmentation specification and how to control where c...

Block and inline layout in normal flow - CSS: Cascading Style Sheets
english and therefore a horizontal writing mode. however, everything described should work in the same way if your document is in a vertical writing mode. as defined in the specification, the margins between two block boxes are what creates separation between the elements. we see this with a very simple layout of two paragraphs, to which i have added a border. the default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom. if we set margins on the paragraph element to 0 then the borders will touch. by default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. if we give them a width, they will continue to lay out one below the other -...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
pport, and all of the browsers that support the updated grid specification support feature queries too. you can use them to deal with the issue we have with our enhanced: floated layout. i use an @supports rule to check for support of display: grid. i then do my grid code on the <ul>, set my width and min-height on the <li> to auto. i also remove the margins and negative margins, and replace the spacing with the grid-gap property. this means i don’t get a final margin on the last row of boxes. the layout now works, even if there is more content in one of the cards, than the others: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
wo-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. flexbox works from the content out. an ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. you let the size of the content decide how much individual space each item takes up. if the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line. grid works from the layout in. when you use css grid layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. it is possible to create tracks that respond to the size of the content, however, they will also change the entire tra...

Subgrid - CSS: Cascading Style Sheets
rid, as defined in the specification. if we remove the grid-template-rows value we enable regular creation of implicit tracks and, although these won't line up with the tracks of the parent, as many as are required will be created. the gap properties and subgrid if you have a gap, column-gap, or row-gap specified on the parent, this will be passed into the subgrid, so it will have the same spacing between tracks as the parent. in some situations however you may wish the subgrid tracks to have a different gap or no gap. this can be achieved by using the gap-* properties on the grid container of the subgrid. you can see this in the example below. the parent grid has a gap of 20px for rows and columns. the subgrid has row-gap set to 0. if you inspect this in the firefox grid inspector you...

CSS Properties Reference - CSS: Cascading Style Sheets
clear clear clip clip color color cursor cursor display display filter filter float cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marginbottom margin-left marginleft margin-right marginright margin-top margintop ...

CSS Table - CSS: Cascading Style Sheets
css table is a css module that defines how to lay out table data. ...

CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation. reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text. css text module level 3 working draft css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...

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. examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { te...

WebKit CSS extensions - CSS: Cascading Style Sheets
ound-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-br...

border-collapse - CSS: Cascading Style Sheets
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 cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen from the list below. values collapse adjacent cells have shared borders (the collapsed-border table rendering model). ...

border-style - CSS: Cascading Style Sheets
rd, displays no border. unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. in the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed. dotted displays a series of rounded dots. the spacing of the dots is not defined by the specification and is implementation-specific. the radius of the dots is half the computed value of the same side's border-width. dashed displays a series of short square-ended dashes or line segments. the exact size and length of the segments are not defined by the specification and are implementation-specific. solid ...

break-after - CSS: Cascading Style Sheets
nibus viverra enim vel suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification. candidate recommendation adds...

break-before - CSS: Cascading Style Sheets
nibus viverra enim vel suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification. candidate recommendation ad...

break-inside - CSS: Cascading Style Sheets
onsequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. ...

clamp() - CSS: Cascading Style Sheets
n eleifend, semper tellus at, pharetra quam. cras feugiat vulputate tortor at rhoncus. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. nam non felis quis sem lobortis sodales vel id libero. phasellus sit amet placerat lorem. </p> css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000px, calc(70% + 100px)); } h1 { letter-spacing: 2px; font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { line-height: 1.5; font-size: max(1.2rem, 1.2vw); } specifications specification status comment css values and units module level 4the definition of 'clamp()' in that specification. editor's draft initial definition. ...

column-gap (grid-column-gap) - CSS: Cascading Style Sheets
r grid, you will need to use the prefixed property. syntax /* keyword value */ column-gap: normal; /* <length> values */ column-gap: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below. values normal the browser's default spacing is used between columns. for multi-column layout this is specified as 1em. for all other layout types it is 0. <length> the size of the gap between columns, defined as a <length>. the <length> property's value must be non-negative. <percentage> the size of the gap between columns, defined as a <percentage>. the <percentage> property's value must be non-negative. formal definition initial va...

display - CSS: Cascading Style Sheets
id="display"> <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.forea...

font-kerning - CSS: Cascading Style Sheets
t-kerning css property sets the use of the kerning information stored in a font. 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. kerning defines how letters are spaced. in well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be. in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the keyword values listed below. values auto the browser determines whether font kerning should be used or not. for example, some browsers will disable kerning ...

justify-items - CSS: Cascading Style Sheets
ever, it is given a justify-items value of center, which causes the grid items to span only as wide as their content width, and align in the center of their cells. ...

justify-self - CSS: Cascading Style Sheets
how these override the justify-items value. these values cause the grid items to span only as wide as their content width, and align in different positions across their cells. ...

<length-percentage> - CSS: Cascading Style Sheets
nstrates several properties that use <length-percentage> values. html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(100% - 200px); specifications s...

margin-left - CSS: Cascading Style Sheets
e, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free...

margin-right - CSS: Cascading Style Sheets
e, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free...

place-self - CSS: Cascading Style Sheets
default placements. these values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions. ...

text-align - CSS: Cascading Style Sheets
e as justify, but also forces the last line to be justified. match-parent similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value. <string> when applied to a table cell, specifies the alignment character around which the cell's contents will align. accessibility concerns the inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as dyslexia. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | understanding wcag 2.0 formal definition initial valuestart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.ap...

text-decoration-skip - CSS: Cascading Style Sheets
dges box-decoration; /* global values */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; syntax values none nothing is skipped. thus, text decoration is drawn for all text content and across atomic inline-level boxes. objects the entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block. spaces all spacing is skipped: all unicode white space characters and all word separators, plus any adjacent letter-spacing or word-spacing. leading-spaces the same as spaces, except that only leading spaces are skipped. trailing-spaces the same as spaces, except that only trailing spaces are skipped. edges the start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from t...

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. 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-ind...

text-justify - CSS: Cascading Style Sheets
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. inter-character the text is justified by adding space between characters (effectively varying letter-spacing), which is most appropriate for languages like japanese. distribute exhibits the same behaviour as inter-character; this value is kept for backwards compatibility. formal definition ...

word-break - CSS: Cascading Style Sheets
working draft initial definition ...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
f the final color should be comprised of that perfectly vivid color. the rest of the final color is made up of the grey paint that represents the saturation. you can also optionally include an alpha channel, to make the color less than 100% opaque. ...

<a>: The Anchor element - HTML: Hypertext Markup Language
recommended. text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated. understanding success criterion 2.5.5: target size target size and 2.5.5 quick test: large touch targets proximity interactive elements, like links, placed in close visual proximity should have space separating them. spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content. spacing may be created using css properties like margin. hand tremors and the giant-button-problem specifications specification status comment referrer policythe definition of 'referrer attribute' in that specification. candidate recommendation ad...

<button>: The Button element - HTML: Hypertext Markup Language
minimum interactive size of 44×44 css pixels is recommended. understanding success criterion 2.5.5: target size | w3c understanding wcag 2.1 target size and 2.5.5 | adrian roselli quick test: large touch targets - the a11y project proximity large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. this spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content. spacing may be created using css properties such as margin. hand tremors and the giant-button-problem - axess lab firefox firefox will add a small dotted border on a focused button. this border is declared through css in the browser stylesheet, but you can overri...

<caption>: The Table Caption element - HTML: Hypertext Markup Language
ple this simple example presents a table that includes a caption. <table> <caption>example caption</caption> <tr> <th>login</th> <th>email</th> </tr> <tr> <td>user1</td> <td>user1@sample.com</td> </tr> <tr> <td>user2</td> <td>user2@sample.com</td> </tr> </table> caption { caption-side: top; align: right; } table { border-collapse: collapse; border-spacing: 0px; } table, th, td { border: 1px solid black; } table {background: red;} do not alter caption. for that you need display: block. specifications specification status comment html living standardthe definition of '<caption>' in that specification. living standard html5the definition of '<caption>' in that specification. recommendation ...

<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
warning: because the <summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. the <h4> will have its role removed and thus will not be treated as a heading for these users. html in summaries this example adds some semantics to th...

<th> - HTML: Hypertext Markup Language
the bottom of the cell. middle: centers the text in the cell. and top: positions the text near the top of the cell. note: do not use this attribute as it is obsolete in the latest standard: use the css vertical-align property instead. width deprecated since html4, obsolete since html5 this attribute is used to define a recommended cell width. additional space can be added with the cellspacing and cellpadding properties and the width of the <col> element can also create extra width. but, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed. note: do not use this attribute as it is obsolete in the latest standard: use the css width property instead. examples see <table> for examples on <th>. specifications specification...

<tr>: The Table Row element - HTML: Hypertext Markup Language
<td>601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>n/a</td> <td>15.00</td> </tr> </tbody> </table> css the css is much more involved this time. it's not complicated, but there's a lot going on. let's break it down. the table and base styles table { border: 1px solid black; font: 16px "open sans", helvetica, arial, sans-serif; border-spacing: 0; border-collapse: collapse; } here we've added the border-spacing and border-collapse properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders. th, td { border: 1px solid black; padding:4px 6px; } th { vertical-align: bottom; } and here are the default styles for all table cells. now le...

JSON.stringify() - JavaScript
y(foo, replacer); // '{"week":45,"month":7}' example replacer, as an array if replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting json string. json.stringify(foo, ['week', 'month']); // '{"week":45,"month":7}', only keep "week" and "month" properties the space argument the space argument may be used to control spacing in the final string. if it is a number, successive levels in the stringification will each be indented by this many space characters (up to 10). if it is a string, successive levels will be indented by this string (or the first ten characters of it). json.stringify({ a: 2 }, null, ' '); // '{ // "a": 2 // }' using a tab character mimics standard pretty-print appearance: json.stringify({...

Values - MathML
mathml accepts different units and constants for specifying lengths. units unit description em font-relative unit ex font-relative unit. (the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value. ...

<mo> - MathML
lse. class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). fence there is no visual effect for this attribute, but it specifies whether the operator is a fence (such as parentheses). allowed values are true or false. form specifies the role of the operator in an enclosed expression, which affects spacing and other default properties. for ordinary operators (+, -, etc. ) you usually do not need to specify this attribute explicitly. possible values are: prefix, for opening fences. (it is the default value if the operator is the first argument in a <mrow> element with more than one argument.) infix, for separators. (it is the default value if the operator is not included in a <mrow> element.)...

<mrow> - MathML
pective operands (such as <mi> and <mn>). this element renders as a horizontal row containing its arguments. when writing a mathml expression, you should group elements within an <mrow> in the same way as they are grouped in the mathematical interpretation of the expression. proper grouping helps the rendering of the expression in several ways: it can improve the display by possibly affecting spacing. it allows for more intelligent line-breaking and indentation. it simplifies the interpretation of the expression by automated systems such as computer algebra systems and audio renderers. attributes class, id, style provided for use with stylesheets. dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). href used to set a hyper...

MathML documentation index - MathML
will now prove the pythagorean theorem: 6 mathml attribute reference mathml, mathml reference this is an alphabetical list of mathml attributes. more details for each attribute are available on particular element pages. 7 values guide, mathml, mathml reference several mathml presentation elements have attributes that accept length values used for size or spacing. mathml accepts different units and constants for specifying lengths. 8 mathml documentation index index, mathml found 40 pages: 9 mathml element reference mathml, mathml reference this is an alphabetical list of mathml presentation elements. 10 <maction> mathml, mathml reference, mathml:element, mathml:enlivening expressions the foll...

font-variant - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition o...

k - SVG: Scalable Vector Graphics
the k attribute specifies the amount for decreasing the spacing between the two glyphs in a kerning pair. the value is in the font coordinate system. this attribute is required. two elements are using this attribute: <hkern> and <vkern> context notes value <number> default value none animatable no <number> this value indicates the amount for decreasing the spacing between the two glyphs in the kerning pair. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'k' in that specification. recommendation initial definition ...

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). four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlengt...

xml:space - SVG: Scalable Vector Graphics
space css property. this attribute influences how browsers parse text content and therefore changes the way the dom is built. therefore, changing this attributeʼs value through the dom api may have no effect. all elements are using this attribute. html, body, svg { height: 100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" xml:space="default">default spacing</text> <text y="40" xml:space="preserve">preserved spacing</text> </svg> usage notes value default | preserve default value default animatable no default with this value set, whitespace characters will be processed in this order: all newline characters are removed. all tab characters are converted into space characters. all leading ...

<text> - SVG: Scalable Vector Graphics
sition vertically from a previous text element. value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight conditiona...

<tspan> - SVG: Scalable Vector Graphics
sition vertically from a previous text element. value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes gl...

Texts - SVG: Scalable Vector Graphics
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. 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. <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="...