Localizing without a specialized tool
what we will translate we will translate a small piece of the ui found in the search bar.
...if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...
... you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/searchbar.dtd l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open the file in your x-testing directory and translate the words inside the quotation marks.
...And 6 more matches

<metadata> - SVG: Scalable Vector Graphics
used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(...
...70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands that sit under th...
... <path d="m0,0 s 10 10 40 12"/> <path d="m80,0 s 70 10 40 12"/> <path d="m0,20 l 10 10 s 40 12 70 10 l 80 20z"/> </g> <g id="monitor"> <title>monitor</title> <desc>a very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> <title>the computer</title> <desc>a desktop computer - broad flat box style</desc> <rect width="160" height="60"/> <g id="discdrive" transform="translate(70 8)"> <title>disc drive</title> <desc>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> <...
...And 6 more matches

<transform-function> - CSS: Cascading Style Sheets
translation (moving) translate() translates an element on the 2d plane.
... translate3d() translates an element in 3d space.
... translatex() translates an element horizontally.
...And 5 more matches

nsIXULTemplateQueryProcessor
the template builder must call initializeforbuilding() before the other methods, except for translateref().
...ults(in nsisupports adatasource, in nsixultemplateresult aref, in nsisupports aquery); nsisupports getdatasource(in nsiarray adatasources, in nsidomnode arootnode, in boolean aistrusted, in nsixultemplatebuilder abuilder, out boolean ashoulddelaybuilding); void initializeforbuilding(in nsisupports adatasource, in nsixultemplatebuilder abuilder, in nsidomnode arootnode); nsixultemplateresult translateref(in nsisupports adatasource, in astring arefstring); methods addbinding() add a variable binding for a particular rule.
...this method must be called once before any of the other query processor methods except for translateref().
...And 4 more matches

Index - Web APIs
191 audiotrack.language api, audio, audiotrack, html dom, language, localization, media, property, read-only, reference, translated, translation, track the read-only audiotrack property language returns a string identifying the language used in the audio track.
...later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.
...this lets you scale, rotate, translate (move), and skew the context.
...And 4 more matches

transform - CSS: Cascading Style Sheets
the transform css property lets you rotate, scale, skew, or translate an element.
... syntax /* keyword values */ transform: none; /* function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: transl...
...atex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
...And 4 more matches

Space Manager Detailed Design - Archive of obsolete content
*/ nsiframe* getframe() const { return mframe; } /** * translate the current origin by the specified (dx, dy).
... */ void translate(nscoord adx, nscoord ady) { mx += adx; my += ady; } /** * returns the current translation from local coordinate space to * world coordinate space.
... this represents the accumulated calls to * translate().
...And 3 more matches

Localization content best practices
this would waste everybody's time and create unnecessary frustration: localizers have to translate strings that are destined to change, developers will need to use new ids later to update them.
... splitting splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate.
...for example, in gaelic these sentences must be translated as tha url an inbhir seo mì-dhligheach;cha ruig sinn url an inbhir seo and cha ghabh url an inbhir seo a pharsadh.
...And 3 more matches

SVGTransform - Web APIs
interface overview also implement none methods void setmatrix(in svgmatrix matrix) void settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0...
... svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types.
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation svg_transform_skewx 5 a skewx(…) transformation svg_transform_skewy 6 a skewy(…) transformation properties name type description type unsigned short the type of the value as specified by one of the svg_transform_* constants defined on this interface.
...And 3 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
for example: const transform = createperspectivematrix(viewport, 130, 1, 100); const translatevec = vec3.fromvalues(-trackdistance, -cranedistance, pushdistance); mat4.translate(transform, transform, translatevec); this starts with the perspective matrix representing a 130° vertical field of view, then applies a translation that moves the camera in a manner that includes track, crane, and push movements.
... to perform a dolly operation, translate the camera view forward and backward along the z axis: mat4.translate(viewmatrix, viewmatrix, [0, 0, dollydistance]); here, [0, 0, dollydistance] is a vector wherein dollydistance is the distance to dolly the camera.
... to move the camera left and right, translate the view matrix along the x axis in the opposite direction from the desired camera movement: mat4.translate(viewmatrix, viewmatrix, [-truckdistance, 0, 0]); note the vector [-truckdistance, 0, 0].
...And 3 more matches

Using the Web Animations API - Web APIs
here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...instead of making objects for keyframes and timing properties, we could just pass their values in directly, like so: document.getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], { duration: 3000, iterations: infinity } ); what’s more, if we only wanted to specify the duration of the animation and not its iterations (by default, animations iterate once), we could pass in the milliseconds alone: document.
...And 3 more matches

Using CSS transforms - CSS: Cascading Style Sheets
<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
...ckface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); }...
...And 3 more matches

<feComposite> - SVG: Scalable Vector Graphics
ath id="red100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twoblue...
...w on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">in</text> </g> ...
...<g transform="translate(525,25)"> <use xlink:href="#red100" filter="url(#outflood)" /> <use xlink:href="#red50" filter="url(#outflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="url(#atopflood)" /> <use xlink:href="#red50" filter="url(#atopflood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#red100" filter="url(#xorflood)" /> <use xlink:href="#red50" filter="url(#xorflood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#red100" filter="url(#arithmeticflood)" /> <use xlink:href="#red50" filter="url(#arithmeticflood)" /> ...
...And 3 more matches

Rosetta - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
... "); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ?
...getsource(oscript) : createscript(oscript); } } function parsedocument () { for ( var ascripts = document.getelementsbytagname("script"), nidx = 0; nidx < ascripts.length; parsescript(ascripts[nidx++]) ); } var odicts = {}, rignoremimes = /^\s*(?:text\/javascript|text\/ecmascript)\s*$/; this.translatescript = parsescript; this.translateall = parsedocument; this.appendcompiler = function (vmimetypes, fcompiler) { if (arguments.length < 2) { throw new typeerror("rosetta.appendcompiler() \u2013 not enough arguments"); } if (typeof fcompiler !== "function") { throw new typeerror("rosetta.appendcompiler() \u2013 second argument must be a function"); } if (!a...
...And 2 more matches

Localizing with Mozilla Translator
mozillatranslator (mt) is a java-based cat tool used to translate a variety of mozilla applications.
...all this means is that the strings have yet to be translated.
... migrating contents when the directory structure changes overall, if you are a ''good'' mt user and you do things like: checking "keep original" flags for strings not needing translation, instead of just leaving the translation empty struggling to get empty lists when running "untranslated strings" and "view fuzzy" if you are up to date in localization regularly running qa checks and trying to minimize them.
...And 2 more matches

Basic Transformations - SVG: Scalable Vector Graphics
for this purpose, the translate() transformation stands ready.
... <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
...for example, translate() and rotate() are common used transformations.
...And 2 more matches

RDF Datasource How-To - Archive of obsolete content
for example, a "file system datasource" would translate the file system into statements like "/tmp is a directory" and "/tmp/foo is contained within /tmp".
... an "imap datasource" would use the imap protocol to translate your mail server's inbox as a collection of statements like "message number 126's subject is 'make money fast on the internet'" and "message number 126 was sent by 'spammer128@hotmail.com'".
... an "address book" datasource could translate a database file into statements like "spammer128@hotmail.com's real name is 'billy dumple'" and "spammer128@hotmail.com is considered an 'important friend'." statements from one datasource can be combined with statements from another datasource using a composite datasource.
...typically, you provide a parser for reading in some sort of static storage (e.g., a data file); the parser translates the datafile into a series of calls to assert() to set up the in-memory datasource.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
that has been transferred over a network, or stored in a data store) is translated into a readable object or other data structure.
...it is designed to be easily understood by humans and for this reason they must be translated by another software.
...also so that a user can browse features to translate or localize the application to access all the content without breaking the layout.
...tml, semantics in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) 411 serialization codingscripting, glossary, javascript, serialization the process whereby an object or data structure is translated into a format suitable for transferral over a network, or storage (e.g.

Bootstrapping a new locale
(read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers.
...untrusted connection in the example above), like so (example for polish): <!entity certerror.pagetitle "niezaufane połączenie"> once you have translated all the <!entity> strings in this file, you should save your work and open the next .dtd or .property file.
... land your translated files one by one, making sure it follows the *mozilla-1.9.2* structure.
... for instance, if you have finished translating all the .dtd and .property files in your ~/ab-cd/browser/ directory, then you should $ cd ~/ab-cd/ $ hg status $ hg commit -m "translated browser/" $ hg push http://bitbucket.org/mozillal10n/ab-cd/ note that due to the distributed nature of hg, hg commit saves the changes locally, i.e.

Index
2 application translation with mercurial android, draft, editing, firefox, lightning, localization, mercurial, seamonkey, translate, patch, thunderbird first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions.
... 3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://developer.mozilla.org/en/create_a_new_localization) 4 encodings for localization files internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate.
... 20 localizing xliff files for ios oasis, translate, xliff, xml, ios firefox for ios uses the xliff xml-based file format to hold and transfer localization data.
...to translate it, you can follow one of two approaches: 29 mozilla content localized in your language localization, mdn, mozilla, reference, style guide no summary!

Localizing XLIFF files for iOS
go through the full xliff page adding <target></target> below each <source> tag set to help you to identify strings that need to be translated.
...keep in mind the following sets of characters that need to remain untranslated: $(some_text_here) is a variable format, %1$@ is another variable format.
... <note> tags contain localizer notes from developers and should not be translated.
... commiting your xliff file using this command, commit your translated xliff file into your locale's directory: git commit -m "commit message here" .

nsIAbCard/Thunderbird3
[noscript] void setpropertyasastring(in string name, in astring value); [noscript] void setpropertyasautf8string(in string name, in autf8string value); [noscript] void setpropertyasuint32(in string name, in pruint32 value); [noscript] void setpropertyasbool(in string name, in boolean value); void deleteproperty(in autf8string name); autf8string translateto(in autf8string atype); void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description properties nsisimpleenumerator readonly: a list of all the properties that this card has as an enumerator, whose members are all nsiproperty objects.
... translateto() translates a card into a specific format.
... the following types are supported: base64xml xml vcard autf8string translateto(in autf8string atype); parameters atype the type of item to translate the card into.
... return value a string containing the translated card.

XPIDL
nsqiresult void* void** object should only be used with methods that act like queryinterface autf8string const nsacstring& nsacstring& string full unicode set permitted (translated to utf-8) acstring const nsacstring& nsacstring& string only chars in range \u0000-\u00ff permitted astring const nsastring& nsastring& string full unicode set permitted jsval const jsval& jsval* anything jsid jsid jsid* not allowed promise mozilla::dom::promise* mozilla::dom::promise** promis...
...however, scriptable methods must contain parameters and a return type that can be translated to script: any native type, save those declared with an nsid, utf8string, cstring, astring, or jsval property, may not be used in a scriptable method or attribute.
...the name is translated so that the first character is unconditionally uppercase; subsequent characters are unaffected.
...in addition, the jsval type is translated as the appropriate javascript value (since a jsval is the internal representation of all javascript values), and objects that are marked nsivariant have their types automatically boxed and unboxed as appropriate.

Using the CSS Typed Object Model - Web APIs
; // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum console.log( btnwidth.values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' // csstransformvalue let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "num...
... let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "...
... had we added translate(), skew(), and rotate() transform functions, the length would have been 4, each with their own x, y, z values, and each with an .is2d property.
... for example, had we included transform: translate3d(1px, 1px, 3px), the .get('transform') would have returned a csstranslate with cssunitvalues for x, y, and z, and the readonly .is2d property would have been false.

CanvasRenderingContext2D.rotate() - Web APIs
to change the center point, you will need to move the canvas by using the translate() method.
...to do this, the following steps are applied to the matrix: first, translate() moves the matrix's origin to the shape's center.
... finally, translate() moves the matrix's origin back to its starting point.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.

EffectTiming.fill - Web APIs
var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode f...
... rather than using fill modes to persist an animation, it is often simpler to set the final value of the animation effect directly in specified style: elem.animate({ transform: 'translatey(100px)' }, 200).finished.then(() => { elem.style.transform = 'translatey(100px)'; }); alternatively, it may be simpler still to set the final value in specified style before triggering the animation and then animate from the start value.
... elem.style.transform = 'translatey(100px)'; elem.animate({ transform: 'none', offset: 0 }, 200); for some complex effects where animations layer on top of one another, it may be necessary to use a fill mode temporarily to capture the final value of an animation before canceling it.
... elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.

Matrix math for the web - Web APIs
transformation = rotate * translate * scale composing multiple transformations the function that we will be using to compose our matrices is multiplyarrayofmatrices(), which is part of the set of utility functions introduced near the top of this article.
...additionally this example uses scale() and translate() functions, which return matrices as defined above.
... let transformmatrix = mdn.multiplyarrayofmatrices([ rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); view on jsfiddle finally, a fun step to show how matrices work is to reverse the steps to bring the matrix back to the original identity matrix.
... let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale back up translate(0, -200, 0), // step 5: move back up rotatearoundzaxis(-math.pi * 0.5), // step 4: rotate back rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); why matrices are important matrices are important because they comprise a small set of numbers that can describe a wide range of transformations in space.

WebGL model view projection - Web APIs
when the w component is a non-zero real number then homogeneous coordinate easily translates back into a normal point in cartesian space.
...the new function looks like this: cubedemo.prototype.computemodelmatrix = function(now) { //scale down by 50% var scale = mdn.scalematrix(0.5, 0.5, 0.5); // rotate a slight tilt var rotatex = mdn.rotatexmatrix(now * 0.0003); // rotate according to time var rotatey = mdn.rotateymatrix(now * 0.0005); // move slightly down var position = mdn.translatematrix(0, -0.1, 0); // multiply together, make sure and read them in opposite order this.transforms.model = mdn.multiplyarrayofmatrices([ position, // step 4 rotatey, // step 3 rotatex, // step 2 scale // step 1 ]); }; in order to use this in the shader it must be set to a uniform location.
...its job is to translate, rotate, and scale the objects in the scene so that they are located in the right place relative to the viewer given the viewer's position and orientation.
... cubedemo.prototype.computeviewmatrix = function(now) { var moveinandout = 20 * math.sin(now * 0.002); var moveleftandright = 15 * math.sin(now * 0.0017); // move the camera around var position = mdn.translatematrix(moveleftandright, 0, 50 + moveinandout ); // multiply together, make sure and read them in opposite order var matrix = mdn.multiplyarrayofmatrices([ // exercise: rotate the camera view position ]); // inverse the operation for camera movements, because we are actually // moving the geometry in the scene, not the camera itself.

Global attributes - HTML: Hypertext Markup Language
translate an enumerated attribute that is used to specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged.
... it can have the following values: empty string and yes, which indicates that the element will be translated.
... no, which indicates that the element will not be translated.
... hidden, data-*, contenteditable, and translate have been added.

Performance fundamentals - Web Performance
many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox.
...not only can you translate elements in 2d space, but you can transform in three dimensions, skew and rotate, and so forth.
... paul irish has an in-depth analysis of the benefits of translate() from a performance point of view.
... note: you may need to attach a translatez(0.1) transform if you wish to get hardware acceleration on your css animations, depending on platform.

Building up a basic demo with the PlayCanvas engine - Game development
let's move the cube 2 units to the left to make space for some friends — add the following line just below the previous code: box.translate(-2, 0, 0); now let's add a new shape — how about a cylinder?
...add the following code, again, at the bottom of your script: var cone = new pc.entity(); cone.addcomponent("model", { type: "cone" }); app.root.addchild(cone); cone.translate(2, 0, 0); var conematerial = new pc.phongmaterial(); conematerial.diffuse.set(0.9, 0.9, 0.9); conematerial.update(); cone.model.model.meshinstances[0].material = conematerial; the code above will create a new cone, add it to the app and move it by 2 units to the right so it's not overlapping the cylinder.
... animation we already used translate or rotate to adjust the position of the shapes; we could also change their positions directly with setposition, or scale them.

Mozilla Content Localized in Your Language
acronyms do you translate widely accepted acronyms such as cd, dvd, mb?
... if translated, is there an equavilent acronym and widely accepted in the language?
... the sequence of the sentence structure in another language may not translate well, when a sentence is half finished as such.

Translation phase
these are the l10n tools we use to localize mozilla applications: pootle a user-friendly web portal built on the translate toolkit api.
... mozilla translator am offline, stand-alone, java-based l10n tool that helps you translate and integrates with your repositories.
... virtaal an offline, stand-alone version of pootle that is also built on the translate toolkit api.

Localization formats
you may choose to present just the html for localization: we give an html file which lists several pieces of content like, <h1>getting started</h1> and the localizer translates to <h1>débuter avec firefox</h1> the localizer then submits the translated html or php back to us by either checking in changes to svn or sending us a patch that pascal checks in.
...("getting started")?></h1> function ___($str) { return $array[$str]; } advantage to .lang simple work-flow allowing the web developer to place the file in svn and it can appear on the staging server .lang syntax is like simplified .po, which many localizers who are familiar with linux and other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good comments no styling by localizers if it is needed may be slower because file is not compiled into binaries...
...this is not the actual content that was translated.

Extras
"15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10...
... <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/...
...27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <t...

Index
219 js_convertarguments jsapi reference, obsolete, spidermonkey js_convertarguments provides a convenient way to translate a series of js values into their corresponding js types with a single function call.
... it saves you from having to write separate tests and elaborate if...else statements in your function code to retrieve and translate multiple js values for use with your own functions.
... 428 js_pusharguments jsapi reference, obsolete, spidermonkey js_pusharguments provides a convenient way to translate a series of native c/c++ values to jsvals with a single function call.

IAccessibleTable
childindex() translates the given row and column indexes into the corresponding cell index.
...columnindex() translates the given cell index into the corresponding column index.
...rowindex() translates the given cell index into a row index.

matrix3d() - CSS: Cascading Style Sheets
o; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: ...
...rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
... the matrix below describes the following transformations: translates every x point by -50px translates every y point by -100px translates every z point by 0 scales down by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -50,-100,0,1.1 ); } 50% { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,0.9 ); } to { transform: matrix3d( 1,0,0,0, ...

transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
...x = a * oldx + c * oldy + e = 3 * 10 - 1 * 30 + 30 = 30 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 30 + 40 = 140 bottom right corner: oldx=40 oldy=30 newx = a * oldx + c * oldy + e = 3 * 40 - 1 * 30 + 30 = 120 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 30 + 40 = 170 --> <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y.
... in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and vertical translation --> <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" /> </svg> scale the scale(<x> [<y>]) transform function specifies a scale operation by x and y.

l10n - Archive of obsolete content
you can supply one or more placeholders to get(), which are strings, such as proper names, that should not be translated themselves but instead should be inserted into the translated string.
...if you do not include the count parameter, you can supply one or more placeholder strings that are to be inserted into the translated string at locations defined by the translator.

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
most extensions consist of a single content package2 the locale package this package is used to contain language data that can be translated.
...in the interest of space, i’m not including all the code here, but you can download it from the following url: fixme: include code from xuldev: translate it and attach it to the chapter document init method the init method is as shown in listing 17.

CSS3 - Archive of obsolete content
the supported transforms are: matrix(), translate(), translatex(), translatey(), scale(), scalex(), scaley(), rotate(), skewx(), and skewy().
... the support of tri-dimensional transforms to be applied to any element by adding the css transform-style, perspective, perspective-origin, and backface-visibility properties and extended the transform property with the following transforms are: matrix 3d(), translate3d(), translatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), and perspective().

Index - Archive of obsolete content
so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
...they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications.

Source code directories overview - Archive of obsolete content
locales contains the files that are translated for firefox.
... localescontains files that are translated.

Localization - Archive of obsolete content
for japanese: <!entity findlabel "検索"> for example, the following text: <description value="&findlabel;"/> is translated as: english version: <description value="find"/> japanese version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface.
... the access keys and keyboard shortcuts have also been translated into entities because they will likely be different in a different locale.

The Business Benefits of Web Standards - Archive of obsolete content
this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load.
...put simply - and quite crudely - a pleasing, satisfying and fulfilling user experience translates, into more traffic, more repeat visitors, fewer bounces, greater loiter time and higher click throughs.

UI pseudo-classes - Learn web development
for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out an...
... as a recap, the :checked code from our styled radio buttons example looks like so: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } you can try it out here: basically, we build the styling for the radio button "inner circle" using the ::before pseudo element, but set a scale(0) transform on it.

Drawing graphics - Learn web development
this contains a new method, translate(), which moves the origin point of the canvas: ctx.translate(width/2, height/2); this causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner.
... at the bottom of the javascript, add the following line to once again make the coordinate origin sit in the middle of the canvas: ctx.translate(width/2, height/2); now let's create a new htmlimageelement object, set its src to the image we want to load, and add an onload event handler that will cause the draw() function to fire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep track of the position the sprite is to be drawn on the scre...

Introduction to client-side frameworks - Learn web development
at build time, transparently to developers, the framework's compiler translates the templates to optimized javascript instructions.
...in order to translate what you write into dom changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.

SVG Guidelines
aths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline styles and use class names or svg attributes examples here are some examples for excessive number precision: 5.000000e-02 → 0.05 (as seen here) -3.728928e-10 → 0 (as seen here) translate(0.000000, -1.000000) → translate(0, -1) (as seen here) as for descriptive ids: for gradients: svg_id1 → gradient1 (as seen here) use of class names avoid using a class if that class is only used once in the file if that class only sets a fill or a stroke, it's better to set the fill/stroke directly on the actual shape, instead of introducing a class just for that shape.
...you can avoid this by doing basic algebra, for example: <g transform="translate(-62, -310)"><shape transform="translate(60, 308)"/></g> can be cut down to: <shape transform="translate(-2,-2)"/> because: -62+60 = -310+308 = -2 performance tips these rules are optional, but they help speeding up the svg.

IPDL Tutorial
struct namevaluepair { nscstring name; nscstring value; }; in implementation code, these structs can be created and used like so: namevaluepair entry(astring, anotherstring); foo(entry.name(), entry.value()); // named accessor functions return references to the members arrays ipdl has simple syntax for arrays: invokemethod(nscstring[] args); in c++ this is translated into a nstarray reference: virtual bool recvinvokemethod(nstarray<nscstring>& args); ipdl's generated data structures can be used in several protocols if they are defined in a separate .ipdlh file.
...the constructor and destructor are translated into standard c++ methods for messages.

Localizing extension metadata on addons.mozilla.org
step 4 allows you to translate any of the above fields into any other language amo supports.
... amazon mechanical turk this is not free, but for a very modest amount of money you can get your amo page quickly translated by native speakers.

QA phase
root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-us before you can build.
...for instance, if you have finished translating all the .dtd and .properties files in your x-testing/browser/chrome/browser/ directory, then you should run these commands: $ hg status $ hg commit -m "translated browser/chrome/browser/" $ hg outgoing $ hg push http://hg.mozilla.org/l10n-central/x-testing note that due to the distributed nature of hg, hg commit saves the changes locally (i.e., in your computer's hg repository).

SVN for Localizers
open the files you want to translate with your favorite text editor.
... translate the content in those files, save them and check for differences by entering this command from the command-line: svn diff this command produces output with every change made to each file.

Localization sign-off reviews
here is some of the criteria we use to perform sign-off reviews: increased amount of untranslated strings we look for previously translated strings changing to untranslated strings in the new revision.
... newly translated strings that shouldn't have been translated self-explanatory enough, right?

Creating localizable web content
text content check that the text is factually correct for an international audience (e.g., mentions of en-us specific product pieces like specific search engines or dictionary should be adapted) look for strings that are likely hard to translate because they are unclear, use play on words or colloquialisms.
... per-locale customizations check if there are alternative links for localized pages (e.g., links to mdn, addons.mozilla.org, or other external resources, are there translated equivalents we can use).

What every Mozilla translator should know
translate the mozilla web or mozilla.dev.l10n.web, we moved announcements and discussions about the translation of the mozilla web pages to this group.
... to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n at mozilla.com), pike on irc another interesting way of getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches.

Localization Use Cases
for polish, we can define brandshortname in shared/branding/official/branding as: <brandshortname "firefox os" _gender: "masculine"> and in shared/branding/unofficial/branding, as: <brandshortname "boot2gecko" _gender:"neutral"> now we can translate crash-banner-os2 into polish without sounding like a robot: <crashbanneros2[brandshortname::_gender] { masculine: "{{ brandshortname }} uległ awarii", feminine: "{{ brandshortname }} uległa awarii", neutral: "{{ brandshortname }} uległo awarii" }> this will give us, depending on the current branding, the following messages: firefox os uległ awarii boot2gecko uległo awarii isolati...
...nstead of a localized value: function showformatedsize(element, l10nid, size) { // … element.textcontent = document.l10n.get(l10nid, { size: sizeinfo.size, unit: sizeinfo.unit }); } and then use the $unit variable verbatim in the english message: <availablesize "{{ $size }} {{ $unit }} available"> in french, the localizer can then use the value of $unit to match it against a translated abbreviation, like so: <_unitedemesure { b: "o", kb: "ko", mb: "mo", gb: "go", tb: "to" }> <availablesize "il reste {{ $size }} {{ _unitedemesure[unit] }}"> similarly, other local variables could be used to provide better and more natural translations in french and other languages alike.

JSS Provider Notes
translatekey() simply gets the encoded form of the given key and then tries to import it by calling generatepublic() or generateprivate().
... translatekey tries two approaches to copying keys.

Mozilla-JSS JCA Provider notes
translatekey() simply gets the encoded form of the given key and then tries to import it by calling generatepublic() or generateprivate().
... translatekey tries two approaches to copying keys.

JIT Optimization Strategies
end getprop_innerize attempts to optimize a situation where a property access of the form window.prop can be directly translated into a property access on the inner global object.
...in these cases, an access of the form arguments[i] can be directly translated into a direct reference to the corresponding argument value in the inlined call.

JS_ConvertArguments
(if conversion creates a new gc thing, the corresponding jsval is written back to argv, which is rooted.) description js_convertarguments provides a convenient way to translate a series of js values into their corresponding js types with a single function call.
... it saves you from having to write separate tests and elaborate if...else statements in your function code to retrieve and translate multiple js values for use with your own functions.

Shell global objects
wasmtexttobinary(str) translates the given text wasm module into its binary encoding.
... wasmbinarytotext(bin) translates binary encoding to text format wasmextractcode(module) extracts generated machine code from webassembly.module.

IAccessibleTableCell
columnindex() translates this cell accessible into the corresponding column index.
...rowindex() translates this cell accessible into the corresponding row index.

nsIAccessibleTable
translate the given row and column indices into the corresponding cell index.
... getrowandcolumnindicesat() translate the given cell index into the corresponding row and column indices.

nsIXULTemplateBuilder
the reference point nsixultemplateresult object for the first iteration is determined by calling the query processor's translateref() method using the value of the root node's ref attribute.
... rootresult nsixultemplateresult readonly: the virtual result representing the starting reference point, determined by calling the query processor's translateref method with the root node's ref attribute as an argument.

nsIMsgCloudFileProvider
this function translates those error codes into those urls.
... void providerurlforerror(in unsigned long aerror); parameters aerror an error code to be translated into a url.

Basic animations - Web APIs
.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.transla...
... function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); c...

Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.addcolorstop(0, '#232256'); lingrad.addcolorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx...
....save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random() * 150)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore(); } } function drawstar(ctx, r) { ctx.save(); ctx.beginpath(); ctx.moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.525731) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="150" height="150"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a backdrop, then translate the origin to the center.

Element.animate() - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).
... document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e.

HTMLElement - Web APIs
htmlelement.translate is a boolean representing the translation.
... living standard added the following properties: translate, itemscope, itemtype, itemid, itemref, itemprop, properties, and itemvalue.

Using the MediaStream Recording API - Web APIs
tion screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { ...
... transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().

SVGSVGElement - Web APIs
dom attributes currentscale and currenttranslate are equivalent to the 2×3 matrix [a b c d e f] = [currentscale 0 0 currentscale currenttranslate.x currenttranslate.y].
... svgsvgelement.currenttranslate read only an svgpoint representing the translation factor that takes into account user "magnification" corresponding to an outermost <svg> element.

SVGTransformList - Web APIs
in order to do this we create a separate svgtransform object for each transformation -- such as translate, rotate, and scale.
...jects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); t...

Visual Viewport API - Web APIs
when called it queries the offsetleft and height properties for values it uses in a css translate() method.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment visual vi...

WEBGL_debug_shaders - Web APIs
this extension is not directly available to web sites as the way of how the shader is translated may uncover personally-identifiable information to the web page about the kind of graphics card in the user's computer.
... methods webgl_debug_shaders.gettranslatedshadersource() returns the translated shader source.

-webkit-transform-2d - CSS: Cascading Style Sheets
examples basic example @media (-webkit-transform-2d) { div { -webkit-transform: translate(100px, 100px); } } this media feature is only supported by webkit.
... if possible, use an @supports feature query instead: @supports (-webkit-transform: translate(100px, 100px)) { div { -webkit-transform: translate(100px, 100px); } } specifications not part of any standard.

backface-visibility - CSS: Cascading Style Sheets
100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); }...
... .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'backface-visibility' in that specification.

perspective-origin - CSS: Cascading Style Sheets
100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bo...
...ttom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.

perspective - CSS: Cascading Style Sheets
ckface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); }...
... .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.

rotate() - CSS: Cascading Style Sheets
html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180p...
...x); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status comment css transforms level 1the definition of 'rotate()' in that specification.

transform-style - CSS: Cascading Style Sheets
#example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: ...
...rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.

rotate - SVG: Scalable Vector Graphics
10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="...
...#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment ...

stitchTiles - SVG: Scalable Vector Graphics
00%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" styl...
...e="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function.

<feColorMatrix> - SVG: Scalable Vector Graphics
" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="ur...
...l(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350...

simple-prefs - Archive of obsolete content
in "package.json": { "type": "control", "label": "click me!", "name": "sayhello", "title": "say hello" } in "main.js": var sp = require("sdk/simple-prefs"); sp.on("sayhello", function() { console.log("hello"); }); localization using the sdk's localization system, you can provide translated forms of the title and description attributes.

util/object - Archive of obsolete content
let { merge } = require("sdk/util/object"); var a = { jetpacks: "are yes", foo: 10 } var b = merge(a, { foo: 5, bar: 6 }, { foo: 50, location: "sf" }); b === a // true b.jetpacks // "are yes" b.foo // 50 b.bar // 6 b.location // "sf" // merge also translates property descriptors var c = { "type": "addon" }; var d = {}; object.defineproperty(d, "name", { value: "jetpacks", configurable: false }); merge(c, d); var props = object.getownpropertydescriptor(c, "name"); console.log(props.configurable); // true parameters source : object the object that other properties are merged into.

Localization - Archive of obsolete content
localized strings translated strings are kept in a directory called "locale" under your main add-on directory, one file for each locale.

Canvas code snippets - Archive of obsolete content
canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globa...

Examples and demos from articles - Archive of obsolete content
convert relative paths to absolute this example show how to translate relative paths to absolute paths.

StringView - Archive of obsolete content
let's try to translate the "hello world!" string into the italian "ciao mondo!!"… var swhelloworld = stringview.makefrombase64("f0vmrgibaqaaaaaaaaaaaaiapgabaaaaearaaaaaaabaaaaaaaaaafakaaaaaaaaaaaaaeaaoaaiaeaahgabaayaaaafaaaaqaaaaaaaaabaaeaaaaaaaeaaqaaaaaaawaeaaaaaaadaaqaaaaaaaagaaaaaaaaaawaaaaqaaaaaagaaaaaaaaacqaaaaaaaaajaaaaaaaacaaaaaaaaabwaaaaaaaaaaqaaaaaaaaabaaaabqaaaaaaaaaaaaaaaabaaaaaaaaaaeaaaaaaanwgaaaaaaaa3ay...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !.

JavaScript Object Management - Archive of obsolete content
data will often be translated into arrays of entities, and those are better represented through classes.

The Essentials of an Extension - Archive of obsolete content
since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name.

Useful Mozilla Community Sites - Archive of obsolete content
developers submit their extensions using the web translation system (wts) and volunteers around the world translate them to different languages.

Firefox addons developer guide - Archive of obsolete content
so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).

Add-ons - Archive of obsolete content
so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
int.na2"); lockpref("ldap_2.servers.ldapint.position", 2); lockpref("ldap_2.servers.ldapint.searchbase", "ou=people,dc=int-evry,dc=fr"); lockpref("ldap_2.servers.ldapint.servername", "ldap1.int-evry.fr"); //news lockpref("news.directory", "/tmp"); //proxy lockpref("network.proxy.autoconfig_url", \ "http://www.int-evry.fr/local/config.proxy"); } // with (prefconfig) this document was initially translated from latex with hevea.

Drag and Drop - Archive of obsolete content
mozilla will translate the data being dragged as needed.

Extension Frequently Asked Questions - Archive of obsolete content
they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications.

Layout System Overview - Archive of obsolete content
the box is introduced into the layout system's frame model via an adapter (boxtoblockadapter) that translates the normal layout model into the box formatting model.

Mozilla Application Framework in Detail - Archive of obsolete content
xslt could be used to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface.

New Skin Notes - Archive of obsolete content
tab text will currently remain untranslated ("documentation").

Space Manager High Level Design - Archive of obsolete content
if the block has any block children, then translate the space manager to the child block's origin and update the space manager in the context for the child block, recursively.

Example Sticky Notes - Archive of obsolete content
--> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended.

How to implement a custom XUL query processor component - Archive of obsolete content
// eventually we should read the <query> to create filters return this._data; }, generateresults: function(adatasource, aref, aquery) { // preform any query and pass the data to the result set return new templateresultset(this._data); }, addbinding: function(arulenode, avar, aref, aexpr) { // add a variable binding for a particular rule, which we aren't using yet }, translateref: function(adatasource, arefstring) { // if we return null, everything stops return new templateresult(null); }, compareresults: function(aleft, aright, avar) { // -1 less, 0 ==, +1 greater var leftvalue = aleft.getbindingfor(avar); var rightvalue = aright.getbindingfor(avar); if (leftvalue < rightvalue) { return -1; } else if (leftvalue > rightvalue) ...

Building Trees - Archive of obsolete content
the builder looks at the label for the corresponding cell, translates any variables or predicates into values, and returns the value.

The Joy of XUL - Archive of obsolete content
an application that is written and deployed with an english language user interface can be translated to french for the same customer.

Complete - Archive of obsolete content
in the allcustom directory, the file allcustom.dtd contains the translated strings.

Adding Buttons - Archive of obsolete content
you should use entities instead so that text can be easily translated.

Adding Style Sheets - Archive of obsolete content
in mozilla, this will be translated as the file global.css, which contains default style information for xul elements.

Introduction - Archive of obsolete content
also, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort.

The Chrome URL - Archive of obsolete content
similarly, if the user changes their theme, the 'skin' part of the chrome url translates to a different set of files, yet the xul and scripts don't need to change.

XPCOM Interfaces - Archive of obsolete content
the process of calling xpcom from a script is called xpconnect, which is a layer which translates script objects into native objects.

XUL Structure - Archive of obsolete content
this structure allows you to translate mozilla or a component into a different language by just adding a new locale for that language.

XUL Coding Style Guidelines - Archive of obsolete content
for example: <!-- localization note homebtn.label : do not translate the entity value "home".

Archived Mozilla and build documentation - Archive of obsolete content
they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications.

2006-11-10 - Archive of obsolete content
trunk / 1_8 for kurdish firefox the firefox translations of the kurdish are only in trunk translating the firefox privacy policy the final and approved en-us version of privacy policy is available here and ready for localization team to translate.

2006-11-17 - Archive of obsolete content
discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché.

2006-11-24 - Archive of obsolete content
approval queue for fx 2.0.0.1 closing closing the approval queue for firefox 2.0.0.1 discussions quality of localized builds and process requirements quality of localized builds and process requirements the translate toolkit mdnto po: its current state and how to use it discussion on clarifications on translate toolkit to avoid confusion.

Building a Theme - Archive of obsolete content
when you load content using a chrome uri, firefox uses the chrome registry to translate these uris into the actual source files on disk (or in jar packages).

VBArray.toArray - Archive of obsolete content
the conversion translates the multidimensional vbarray into a single dimensional javascript array.

Issues Arising From Arbitrary-Element hover - Archive of obsolete content
for example: :hover {color: red;} this is equivalent to the css2 rule: *:hover {color: red;} ..which translates as "any element that is being hovered should have its foreground colored red." thus, hovering over paragraphs, tables, headings, and any other element in a document will cause text to become red.

GLSL Shaders - Game development
both projectionmatrix and modelviewmatrix are provided by three.js and the vector is passed with the new 3d position, which results in the original cube moving 10 units along the x axis and 5 units along the z axis, translated via a shader.

Tiles and tilemaps overview - Game development
here are examples showing how to translate from world coordinates to screen coordinates and back again: // these functions assume that the camera points to the top left corner function worldtoscreen(x, y) { return {x: x - camera.x, y: y - camera.y}; } function screentoworld(x,y) { return {x: x + camera.x, y: y + camera.y}; } rendering a trivial method for rendering would just be to iterate over all the tiles (like in static tile...

Compile - MDN Web Docs Glossary: Definitions of Web-related terms
some compilers which translate between similar level languages are called transpilers or cross-compilers, for instance to compile from typescript to javascript.

Deserialization - MDN Web Docs Glossary: Definitions of Web-related terms
that has been transferred over a network, or stored in a data store) is translated into a readable object or other data structure.

High-level programming language - MDN Web Docs Glossary: Definitions of Web-related terms
it is designed to be easily understood by humans and for this reason they must be translated by another software.

Internationalization - MDN Web Docs Glossary: Definitions of Web-related terms
also so that a user can browse features to translate or localize the application to access all the content without breaking the layout.

Localization - MDN Web Docs Glossary: Definitions of Web-related terms
the following are common factors to consider: language unit of measure (e.g., kilometers in europe, miles in u.s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g., 10 000,00 in germany vs.

Serialization - MDN Web Docs Glossary: Definitions of Web-related terms
the process whereby an object or data structure is translated into a format suitable for transferral over a network, or storage (e.g.

Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms
':' '/' '?' '#' '[' ']' '@' '!' '$' '&' "'" '(' ')' '*' '+' ',' ';' '=' '%' ' ' %3a %2f %3f %23 %5b %5d %40 %21 %24 %26 %27 %28 %29 %2a %2b %2c %3b %3d %25 %20 or + depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding version used in an application/x-www-form-urlencoded message), or in '%20' like on urls.

What is a Domain Name? - Learn web development
if it does, the name is translated to the ip address and the browser negotiates contents with the web server.

Styling web forms - Learn web development
however, when you position it with for example a transform: translatey();, it moves but leaves an ugly gap in the <fieldset> border, which is not easy to get rid of.

CSS performance optimization - Learn web development
properties that will lead to compositing include 3d transforms (transform: translatez(), rotate3d(), etc.), animating transform and opacity, position: fixed, will-change, and filter.

Multimedia: video - Learn web development
optimizing video has the potential for very large bandwidth savings that translate into better website performance.

Componentizing our React app - Learn web development
this data translates nicely to an object.

Getting started with React - Learn web development
for example, class in html translates to classname in jsx.

Deploying our app - Learn web development
so this translates into: if the tests pass, then build the code.

Mozilla accessibility architecture
accessible events accessible events are dom events translated into the event mechanism of the given platform, using the enumerated event numbers listed in nsiaccessibleeventreceiver.idl.

Gecko info for Windows accessibility vendors
here are the methods for isimpledomdocument: hresult get_url (/* [out] */ bstr *url); // location of document hresult get_title (/* [out] */ bstr *title); // from the <title> hresult get_mimetype(/* [out] */ bstr *mimetype); // for example text/html or text/plain hresult get_doctype (/* [out] */ bstr *doctype); // from the <!doctype ..> hresult get_namespaceuriforid( // translate namespace id's from isimpledomnode /* [in] */ unsigned short namespaceid, // calls into the actual namespace uri's /* [out] */ bstr *namespaceuri); hresult put_alternateviewmediatypes(/* [in] */ bstr * commaseparatedmediatypes); // for example "aural, braille" keyboard user interface and api fortunately, gecko uses the standard keyboard api's for each supported platform.

Chrome registration
this allows translators to plug in a different chrome package to translate an application without altering the rest of the source code.

Creating Sandboxed HTTP Connections
this article will cover the basics of doing http connections from xpcom javascript, and should easily translate to c++ xpcom.

Extending a Protocol
async echo(nscstring data) returns (nscstring aresult); - the "returns" here translates to a mozpromise, with a resolver that will settle a promise with the expected value.

ISO8601DateUtils.jsm
string create( adate ); parameters adate a javascript date object to translate into an iso 8601 format string.

Sqlite.jsm
this translates to fewer lines of code to talk to sqlite.

L10n testing with xcode
xcode will import your translated strings into the project by adding them to the project folder and replacing the existing strings.

Localization technical reviews
more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated.

Creating localizable web applications
for instance, "log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "logging in").

Setting up the infrastructure
stats-po.sh will give you a bird's-eye view on the statistics of translated, fuzzy and missing strings for each locale.

Writing localizable code
try not to assume grammar in composite strings splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate.

gettext
for instance, "log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "logging in").

Using the viewport meta tag to control layout on mobile browsers
(allen pike's choosing a viewport for ipad sites has a good explanation for web developers.) for pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width.

Research and prep
your selections for default rss readers and content handlers should follow these guidelines: be translated in your language (because it makes the application unusable if it's not in your language provide for the intended user experience (e.g., minimal to no advertisements within the user experience) no more than three (if possible) choices.

Emscripten
using emscripten, you can compile c and c++ code into javascript compile any other code that can be translated into llvm bytecode into javascript.

nss tech note3
each of the above seccertusages translates into a required set of cert type and key usage for the certificate itself, and into another set of required cert type and key usage for all the ca certs in the cert chain.

Python binding for NSS
convenience functions are provided to translate between the numeric value of an enumerated constant and it's string representation and visa versa.

sslerr.html
ssl_error_mac_computation_failure -12213 "message authentication code computation failed." ssl_error_sym_key_context_failure -12212 "failure to create symmetric key context." ssl_error_sym_key_unwrap_failure -12211 "failure to unwrap the symmetric key in client key exchange message." ssl_error_iv_param_failure -12209 "pkcs11 code failed to translate an iv into a param." ssl_error_init_cipher_suite_failure -12208 "failed to initialize the selected cipher suite." ssl_error_session_key_gen_failure -12207 "failed to generate session keys for ssl session." on a client socket, indicates a failure of the pkcs11 key generation function.

Pork Tool Development
this can be translated to an unboxedloc, which has a line and column offset (see renamer.cc:65).

Rhino JavaScript compiler
overview the javascript compiler translates javascript source into java class files.

Creating JavaScript jstest reftests
when importing test262, the test file's in-file metadata is translated from test262 format to a format readibly by the jstest harness.

SpiderMonkey Internals
it translates postfix bytecode into infix source by consulting a separate byte-sized code, called source notes, to disambiguate bytecodes that result from more than one grammatical production.

JS_PushArguments
description js_pusharguments provides a convenient way to translate a series of native c/c++ values to jsvals with a single function call.

JSAPI reference
ons to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration added in spidermonkey 31 typedef jsexceptionstate js_saveexceptionstate js_restoreexceptionstate js_dropexceptionstate these functions translate errors into exceptions and vice versa: js_reportpendingexception js_errorfromexception js_throwreportederror obsolete since jsapi 29 values and types typedef jsval js::value js::value constructors: js::nullvalue added in spidermonkey 24 js::undefinedvalue added in spidermonkey 24 js::booleanvalue added in spidermonkey 24 js::truevalue added in spidermonkey 24 js::falseval...

Feed content access API
we could, alternatively, use its plaintext() method to get a copy of the title translated into plain text.

Introduction to XPCOM for the DOM
for example, in idl we'd write getelementbyid, which in c++ would be translated to getelementbyid.

XPCShell Reference
you can specify arguments that will get translated to an exit code.

nsIDocShell
when reading a document, a converter is used to translate the text from its original format into unicode.

nsIProtocolHandler
the caller may provide the charset from which the uri string originated, so that the uri string can be translated back to that charset (if necessary) before communicating with, for example, the origin server of the uri string.

Mail and RDF
the folder datasource then translates these property changes into onassert() or onunassert() calls to the observers.

Add to iPhoto
in c, these are declared thusly: void cfrelease(cftyperef cf); void cfretain(cftyperef cf); in javascript, this translates to: this.cfrelease = this.lib.declare("cfrelease", ctypes.default_abi, ctypes.void_t, ctypes.voidptr_t); // input: object to release this.cfretain = this.lib.declare("cfretain", ctypes.default_abi, ctypes.void_t, ...

Using COM from js-ctypes
converted c code now we can translate whole code into c syntax.

Using Objective-C from js-ctypes
converted c code now we can translate our whole code into c syntax.

Standard OS Libraries
to call objective-c based api from ctypes, use the following functions in libobjc.dylib: objc_getclass to get class sel_registername to register selector name objc_msgsend and some variants to send message to class and instance objective-c code can be translated into c code by the following rule: // objective-c code nsevent loc = [nsevent mouselocation]; // pseudo c code nsevent loc = (nspoint)objc_msgsend(objc_getclass("nsevent"), sel_registername("mouselocation")); example: [nsevent mouselocation] components.utils.import("resource://gre/modules/ctypes.jsm"); let objc = ctypes.open(ctypes.libraryname("objc")); ...

Mozilla
this article will cover the basics of doing http connections from xpcom javascript, and should easily translate to c++ xpcom.

Debugger.Memory - Firefox Developer Tools
spidermonkey includes several just-in-time compilers, each of which translates javascript source or bytecode to machine code.

Debugger.Source - Firefox Developer Tools
sourcemapurl if the instance refers to javascript source, if this source was produced by a minimizer or translated from some other language, and we know the url of a source map document relating the source positions in this source to the corresponding source positions in the original source, then this property’s value is that url.

Debugger-API - Firefox Developer Tools
given a debugger.script, one can set breakpoints, translate between source positions and bytecode offsets (a deviation from the “source level” design principle), and find other static characteristics of the code.

Paint Flashing Tool - Firefox Developer Tools
dy> #container { border: 1px solid; } .moving-box { height: 20%; width:20%; margin: 2%; padding: 2%; background-color: blue; color: white; font-size: 24px; } #moving-box-left-margin { transition: margin-left 4s; } #moving-box-transform { transition: transform 4s; } body:hover #moving-box-left-margin{ margin-left: 74%; } body:hover #moving-box-transform { transform: translate(300%); } to see the transition, move the mouse into the space below: now switch paint flashing on, and try it again.

Call Tree - Firefox Developer Tools
total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording.

Responsive Design Mode - Firefox Developer Tools
while touch event simulation is enabled, mouse events are translated into touch events; this includes (starting in firefox 79) translating a mouse-drag event into a touch-drag event.

Animation.commitStyles() - Web APIs
examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification.

Animation.onremove - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.

Animation.pause() - Web APIs
le animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink m...

Animation.persist() - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.

Animation.play() - Web APIs
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.

Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.

AudioTrack.kind - Web APIs
"translation" a translated version of the primary audio track.

AudioTrack.language - Web APIs
example this example locates all of a media element's primary language and translated audio tracks and returns a list of objects containing each of those tracks' id, kind, and language.

CSSNumericValue - Web APIs
cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssnumericarray cssperspective csspositionvalue cssrotate cssskew cssskeyx cssskeyw csstranslate cssunitvalue properties none.

CSSStyleValue.parse() - Web APIs
const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification.

CSS Object Model (CSSOM) - Web APIs
s typed object model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).

CSS Typed Object Model API - Web APIs
it is also generally faster, as values can be directly manipulated and then cheaply translated back into underlying values without having to both build and parse strings of css.

CanvasRenderingContext2D.setTransform() - Web APIs
this lets you scale, rotate, translate (move), and skew the context.

CanvasRenderingContext2D.transform() - Web APIs
this lets you scale, rotate, translate (move), and skew the context.

CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.

Compositing example - Web APIs
"rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s / 100,...

Drawing shapes with canvas - Web APIs
later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.

DOMMatrix() - Web APIs
var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition ...

DOMMatrix - Web APIs
dommatrix.translateself() modifies the matrix by applying the specified vector.

DOMMatrixReadOnly - Web APIs
dommatrixreadonly.translate() returns a new dommatrix containing a matrix calculated by translating the source matrix using the specified vector.

EffectTiming.easing - Web APIs
examples in the red queen's race example, we animate alice and the red queen by passing an easing of steps(7, end) to animate(): // define the key frames var spriteframes = [ { transform: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playbackrate: 1, ...

Element.releasePointerCapture() - Web APIs
ss div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.

Element.setPointerCapture() - Web APIs
ss div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that specification.

GlobalEventHandlers.onmouseup - Web APIs
html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); ...

HTMLElement: animationcancel event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeven...

HTMLElement: animationiteration event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeven...

HTMLElement: animationstart event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeven...

KeyboardEvent.code - Web APIs
function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.

KeyframeEffect.KeyframeEffect() - Web APIs
examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification.

KeyframeEffect.target - Web APIs
examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id=​"rabbit">​click the rabbit's ears!​</div>​ rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.

KeyframeEffect - Web APIs
examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.

KeyframeEffectOptions - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).

getBBox() - Web APIs
example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg> javascript var rectbbox = document.queryselector('#rect_1'); var rectboundingclientrect = document.que...

SVGMatrix - Web APIs
svgmatrix.translate() post-multiplies a translation transformation on the current matrix and returns the resulting matrix as svgmatrix.

StylePropertyMapReadOnly - Web APIs
</p> <dl id="output"></dl> we add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap().

VisualViewport - Web APIs
bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way...

Clearing with colors - Web APIs
by tweaking those "dials" and "switches" you can modify the internal state of the webgl machine, which in turn changes how input (in this case, a clear command) translates into output (in this case, all pixels are set to green).

Compressed texture formats - Web APIs
note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg.

Adding 2D content to a WebGL context - Web APIs
mat4.translate(modelviewmatrix, // destination matrix modelviewmatrix, // matrix to translate [-0.0, 0.0, -6.0]); // amount to translate // tell webgl how to pull out the positions from the position // buffer into the vertexposition attribute.

WebGL tutorial - Web APIs
animating objects with webgl shows how to rotate and translate objects to create simple animations.

Introduction to WebRTC protocols - Web APIs
requests will be translated from the device’s private ip to the router’s public ip with a unique port.

Writing a WebSocket server in C# - Web APIs
using system.text; using system.text.regularexpressions; while(client.available < 3) { // wait for enough bytes to be available } byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); //translate bytes of request to string string data = encoding.utf8.getstring(bytes); if (regex.ismatch(data, "^get")) { } else { } the response is easy to build, but might be a little bit difficult to understand.

Web Video Text Tracks Format (WebVTT) - Web APIs
note this last line may not translate well.

Geometry and reference spaces in WebXR - Web APIs
this reference space internally knows how to map the coordinates of the controller to the headset's coordinates, so webxr can translate coordinates back and forth for you.

Web audio spatialization basics - Web APIs
= panner.orientationz.value*math.cos(q) - panner.orientationy.value*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse eve...

Window.requestAnimationFrame() - Web APIs
element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle.

XRRigidTransform() - Web APIs
among other things, xrrigidtransform is used when providing a transform to translate between coordinate systems across spaces.

XRRigidTransform.matrix - Web APIs
the returned matrix can then be premultiplied with a column vector to rotate the vector by the 3d rotation specified by the orientation, then translate it by the position.

ARIA: article role - Accessibility
user agents translate this to the appropriate accessibility information just like the article role.

An overview of accessible web applications and widgets - Accessibility
aria attributes are interpreted automatically by the browser and translated to the operating system's native accessibility apis.

Web Accessibility: Understanding Colors and Luminance - Accessibility
note that in that same section of the css color module 3, there are algorigthms available to translate the hsl to rgb.

font-weight - CSS: Cascading Style Sheets
451) will be translated to one of these values for non-variable fonts.

@keyframes - CSS: Cascading Style Sheets
syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list.

update - CSS: Cascading Style Sheets
examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification.

Variable fonts guide - CSS: Cascading Style Sheets
while this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.

CSS Transforms - CSS: Cascading Style Sheets
reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css.

Using CSS transitions - CSS: Cascading Style Sheets
<p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort.

Animatable CSS properties - CSS: Cascading Style Sheets
ding-top scroll-snap-coordinate scroll-snap-destination 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 ...

Grid wrapper - CSS: Cascading Style Sheets
the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of una kravets): .item { width: 100vw; margin-left: 50%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.

CSS reference - CSS: Cascading Style Sheets
emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various...

font-weight - CSS: Cascading Style Sheets
451) will be translated to one of these values for non-variable fonts using the fallback weights system.

linear-gradient() - CSS: Cascading Style Sheets
the other values are translated into an angle.

offset-path - CSS: Cascading Style Sheets
11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate(0,0)" ...

repeating-linear-gradient() - CSS: Cascading Style Sheets
the other values are translated into an angle.

transform-box - CSS: Cascading Style Sheets
inition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely.

matrix() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specificati...

perspective() - CSS: Cascading Style Sheets
width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification.

scale3d() - CSS: Cascading Style Sheets
sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); transform-origin: left; background-color: pink; } result specifications ...

scaleZ() - CSS: Cascading Style Sheets
10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) trans...

transform-origin - CSS: Cascading Style Sheets
this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center.

Using device orientation with 3D transforms - Developer guides
there are however two corrections that should be applied to those values: the initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
how to describe a color in order to represent a color in css, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use.

HTML attribute reference - HTML: Hypertext Markup Language
translate global attribute specify whether an element’s attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
browsers with automatic page translation features may skip over attributes when translating, meaning the placeholder may not get translated.

<time> - HTML: Hypertext Markup Language
it may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

HTML documentation index - HTML: Hypertext Markup Language
33 translate experimental, global attributes, html, reference the translate global attribute is an enumerated attribute that is used to specify whether an element's translateable attribute values and its text node children should be translated when the page is localized, or whether to leave them unchanged.

An overview of HTTP - HTTP
the browser translates these directions in http requests, and further interprets the http responses to present the user with a clear response.

Proxy Auto-Configuration (PAC) file - HTTP
this is mainly because the expression is translated to a regexp via subsitution of [.*?].

Left shift (<<) - JavaScript
so e.g.: 9 << 3 translates to: 9 * (2 ** 3) = 9 * (8) = 72.

Web video codec guide - Web media technologies
in essence, the encoder finds the moving objects, then builds an internal frame of sorts that looks like the original but with all the objects translated to their new locations.

Lazy loading - Web Performance
it's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

Performance budgets - Web Performance
these time-based metrics will translate into file-size budgets.

Web Performance
it is a way of shorten the critical rendering path length, what would translate into improved page load times.

azimuth - SVG: Scalable Vector Graphics
stantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'azimuth' in that specification.

baseFrequency - SVG: Scalable Vector Graphics
"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction.

color-rendering - SVG: Scalable Vector Graphics
stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#gradient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.

diffuseConstant - SVG: Scalable Vector Graphics
<filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'diffuseconstant' in that specification.

divisor - SVG: Scalable Vector Graphics
00%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in kernelmatrix or 1 if sum is 0 animatable yes <number> this value defines the divisor.

elevation - SVG: Scalable Vector Graphics
ntlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'elevation' in that specification.

exponent - SVG: Scalable Vector Graphics
cr type="gamma" exponent="5"/> <fefuncg type="gamma" exponent="5"/> <fefuncb type="gamma" exponent="5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifications specification status comment filter effects module level 1the definition of 'exponent' in that ...

flood-color - SVG: Scalable Vector Graphics
3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value color initial value black animatable yes specifications specification status comment filter effects module level 1the definition of 'flood-color' in that specification.

flood-opacity - SVG: Scalable Vector Graphics
<feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value <alpha-value> initial value 1 animatable yes <alpha-value> a number or percentage indicating the opacity value to use across the current filter primitive subregion.

fr - SVG: Scalable Vector Graphics
reen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" ...

fx - SVG: Scalable Vector Graphics
green"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.

fy - SVG: Scalable Vector Graphics
green"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.

gradientTransform - SVG: Scalable Vector Graphics
ent1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default valu...

intercept - SVG: Scalable Vector Graphics
ear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'intercept' in that specification.

k1 - SVG: Scalable Vector Graphics
<fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k1' in that specification.

k2 - SVG: Scalable Vector Graphics
<fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k2' in that specification.

k3 - SVG: Scalable Vector Graphics
<fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k3' in that specification.

k4 - SVG: Scalable Vector Graphics
<fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k4' in that specification.

kernelMatrix - SVG: Scalable Vector Graphics
%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes <list of numbers> the list of <number>s that make up the kernel matrix for the convolution.

lighting-color - SVG: Scalable Vector Graphics
<filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value color default value white animatable yes specifications specification status comment filter effects module level 1the definition of 'lighting-color' in that specification.

limitingConeAngle - SVG: Scalable Vector Graphics
tlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specification.

mode - SVG: Scalable Vector Graphics
lood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable yes for a description of the values, see <blend-mode>.

numOctaves - SVG: Scalable Vector Graphics
y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <integer> default value 1 animatable yes <integer> defines the number of octaves.

order - SVG: Scalable Vector Graphics
0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3 animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.

points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space.

pointsAtX - SVG: Scalable Vector Graphics
fuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatx' in that specification.

pointsAtY - SVG: Scalable Vector Graphics
fuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsaty' in that specification.

pointsAtZ - SVG: Scalable Vector Graphics
uselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatz' in that specification.

preserveAlpha - SVG: Scalable Vector Graphics
feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false animatable yes true this value indicates that the convolution will only apply to the color channels.

scale - SVG: Scalable Vector Graphics
lter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.

seed - SVG: Scalable Vector Graphics
ise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraph...

specularConstant - SVG: Scalable Vector Graphics
specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'specularconstant' in that specification.

specularExponent - SVG: Scalable Vector Graphics
id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term.

stdDeviation - SVG: Scalable Vector Graphics
stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: translatex(280px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first number represents a standard deviation value along the x-axis.

surfaceScale - SVG: Scalable Vector Graphics
> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.

tableValues - SVG: Scalable Vector Graphics
tablevalues="1 0"/> <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup table for the color component transfer function.

type - SVG: Scalable Vector Graphics
usage context for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy animatable no normative document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha animatable yes normative document svg 1.1 (2nd edition) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements ...

vector-effect - SVG: Scalable Vector Graphics
example example: vector-effect="non-scaling-stroke" <svg viewbox="0 0 500 240"> <!-- normal --> <path d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> </svg> result specifications specification status comment scalable vector gr...

z - SVG: Scalable Vector Graphics
ghting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fepointlight for <fepointlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.

zoomAndPan - SVG: Scalable Vector Graphics
magnification in this context means the effect of a supplemental scale and translate transformation on the outermost svg document fragment.

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
currentscale and currenttranslate dom attributes are implemented, but there is no pan and zoom user interface.

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow dom spec.

Functions - XPath
e() false() floor() format-number() xslt-specific function-available() generate-id() xslt-specific id() (partially supported) key() xslt-specific lang() last() local-name() name() namespace-uri() normalize-space() not() number() position() round() starts-with() string() string-length() substring() substring-after() substring-before() sum() system-property() xslt-specific translate() true() unparsed-entity-url() xslt-specific (not supported) ...

Index - XPath
52 translate xslt, xslt_reference the translate function evaluates a string and a set of characters to translate and returns the translated string.

The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-url() (not supported) ...

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
me() (supported) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-url() (not supported) for further reading books online the world wide web consortium portals articles tutorials/examples mailing lists/newsgroups resources index original document information copyright information: copyright © 2001-2003 netscape.

Compiling a New C/C++ Module to WebAssembly - WebAssembly
at this point in your source directory you should have: the binary wasm module code (hello.wasm) a javascript file containing glue code to translate between the native c functions, and javascript/wasm (hello.js) an html file to load, compile, and instantiate your wasm code, and display its output in the browser (hello.html) running your example now all that remains is for you to load the resulting hello.html in a browser that supports webassembly.