You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: files/en-us/glossary/base64/index.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -12,11 +12,11 @@ tags:
12
12
- atob()
13
13
- btoa()
14
14
---
15
-
**Base64** is a group of similar [binary-to-text encoding](https://en.wikipedia.org/wiki/Binary-to-text_encoding) schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term*Base64* originates from a specific [MIME content transfer encoding](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding).
15
+
**Base64** is a group of similar [binary-to-text encoding](https://en.wikipedia.org/wiki/Binary-to-text_encoding) schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term*Base64* originates from a specific [MIME content transfer encoding](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding).
16
16
17
17
Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ASCII. This is to ensure that the data remain intact without modification during transport. Base64 is commonly used in a number of applications including email via [MIME](https://en.wikipedia.org/wiki/MIME), and storing complex data in [XML](/en-US/docs/Web/XML).
18
18
19
-
One common application of Base64 encoding on the web is to encode binary dataso it can be included in a [data: URL](/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
19
+
One common application of Base64 encoding on the web is to encode binary dataso it can be included in a [data: URL](/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
20
20
21
21
In JavaScript there are two functions respectively for decoding and encoding Base64 strings:
22
22
@@ -27,18 +27,18 @@ The algorithm used by `atob()` and `btoa()` is specified in [RFC 4648](https://d
27
27
28
28
Note that `btoa()` expects to be passed binary data, and will throw an exception if the given string contains any characters whose UTF-16 representation occupies more than one byte. For more details, see the documentation for [`btoa()`](/en-US/docs/Web/API/btoa).
29
29
30
-
## Encodedsize increase
30
+
## Encodedsize increase
31
31
32
-
Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file(3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).
32
+
Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file(3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).
33
33
34
-
This means that the Base64 version of a string or file will be at least 133% the size of its source(a \~33% increase). The increase may be largerif the encoded data is small. For example, the string `"a"` with `length === 1` gets encoded to `"YQ=="` with `length === 4` — a 300% increase.
34
+
This means that the Base64 version of a string or file will be at least 133% the size of its source(a \~33% increase). The increase may be largerif the encoded data is small. For example, the string `"a"` with `length === 1` gets encoded to `"YQ=="` with `length === 4` — a 300% increase.
35
35
36
36
## The "Unicode Problem"
37
37
38
-
Since [`DOMString`](/en-US/docs/Web/API/DOMString"/en-US/docs/Web/API/DOMString")s are 16-bit-encoded strings, in most browsers calling `window.btoa` on a Unicode string will cause a `Character Out Of Range` exception if a character exceeds the range of a 8-bit ASCII-encoded character. There are two possible methods to solve this problem:
38
+
Since [`DOMString`](/en-US/docs/Web/API/DOMString)s are 16-bit-encoded strings, in most browsers calling `window.btoa` on a Unicode string will cause a `Character Out Of Range` exception if a character exceeds the range of a 8-bit ASCII-encoded character. There are two possible methods to solve this problem:
39
39
40
40
- the first one is to escape the whole string and then encode it;
41
-
- the second one is to convert the UTF-16 [`DOMString`](/en-US/docs/Web/API/DOMString"/en-US/docs/Web/API/DOMString") to an UTF-8 array of characters and then encode it.
41
+
- the second one is to convert the UTF-16 [`DOMString`](/en-US/docs/Web/API/DOMString) to an UTF-8 array of characters and then encode it.
Copy file name to clipboardExpand all lines: files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -182,7 +182,7 @@ The second is `grayscale()`; by using a percentage we are setting how much colo
182
182
183
183
**Play with the percentage and pixel parameters in the live example to see how the images change. You could also swap the values for some others. Try `contrast(200%)`, `invert(100%)` or `hue-rotate(20deg)` on the live example above. Take a look at the MDN page for [`filter`](/en-US/docs/Web/CSS/filter) for many other options you could try.**
184
184
185
-
You can apply filters to any element and not just images. Some of the filter options available do very similar things to other CSS features, for example `drop-shadow()` works in a very similar way and gives a similar effect to [`box-shadow`](/en-US/docs/Web/CSS/box-shadow"The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.") or [`text-shadow`](/en-US/docs/Web/CSS/text-shadow"The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations."). The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
185
+
You can apply filters to any element and not just images. Some of the filter options available do very similar things to other CSS features, for example `drop-shadow()` works in a very similar way and gives a similar effect to [`box-shadow`](/en-US/docs/Web/CSS/box-shadow) or [`text-shadow`](/en-US/docs/Web/CSS/text-shadow). The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
186
186
187
187
In this next example we are applying our filter to a box, and comparing it to a box shadow. As you can see, the drop-shadow filter follows the exact shape of the text and border dashes. The box shadow just follows the square of the box.
Copy file name to clipboardExpand all lines: files/en-us/learn/css/howto/css_faq/index.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -235,7 +235,7 @@ transform: rotate(90deg);
235
235
236
236
> **Note:** For more information on dealing with prefixed properties, see [Handling common HTML and CSS problems — Handling CSS prefixes](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#handling_css_prefixes) from our [Cross-browser testing](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing) module.
237
237
238
-
> **Note:** See the [Mozilla CSS Extensions](/en-US/docs/Web/CSS/Mozilla_Extensions"CSS Reference/Mozilla Extensions") page for more information on the Mozilla-prefixed CSS properties.
238
+
> **Note:** See the [Mozilla CSS Extensions](/en-US/docs/Web/CSS/Mozilla_Extensions) page for more information on the Mozilla-prefixed CSS properties.
Copy file name to clipboardExpand all lines: files/en-us/learn/forms/other_form_controls/index.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -58,7 +58,7 @@ Visually, the text entered wraps and the form control is by default resizable. M
58
58
59
59
The following screenshots show default, focused, and disabled `<textarea>` elements in Firefox 71 and Safari 13 on macOS, and Edge 18, Yandex 14, Firefox 71 and Chrome 79 on Windows 10.
60
60
61
-

61
+

62
62
63
63
> **Note:** You can find a slightly more interesting example of text area usage in the [example](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) we put together in the first article of the series ([see the source code also](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html)).
Copy file name to clipboardExpand all lines: files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ The HTML head is the contents of the {{htmlelement("head")}} element — unlike
63
63
</head>
64
64
```
65
65
66
-
In larger pages however, the head can get quite full.Try going to some of your favorite websites and use the [developer tools](/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. Let's get started.
66
+
In larger pages however, the head can get quite full.Try going to some of your favorite websites and use the [developer tools](/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. Let's get started.
67
67
68
68
## Adding a title
69
69
@@ -77,23 +77,23 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
77
77
1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html). To do this, either
78
78
79
79
1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.
80
-
2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's*File > Save Page As...* menu and choose a sensible place to save the file.
80
+
2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's*File > Save Page As...* menu and choose a sensible place to save the file.
81
81
82
82
2. Now open the file in your browser. You should see something like this:
83
83
84
-
It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
84
+
It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
85
85
86
86
3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.
87
87
88
88
The `<title>` element contents are also used in other ways. For example, if you try bookmarking the page (_Bookmarks > Bookmark This Page_ or the star icon in the URL bar in Firefox), you will see the `<title>` contents filled in as the suggested bookmark name.
89
89
90
-

90
+

91
91
92
92
The `<title>` contents are also used in search results, as you'll see below.
93
93
94
94
## Metadata: the \<meta> element
95
95
96
-
Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of asmetadata too. There are a lot of different types of `<meta>` elements that can be included in your page's \<head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.
96
+
Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of asmetadata too. There are a lot of different types of `<meta>` elements that can be included in your page's \<head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.
97
97
98
98
### Specifying your document's character encoding
99
99
@@ -109,7 +109,7 @@ This element specifies the document's character encoding — the character set t
109
109
110
110

111
111
112
-
> **Note:** Some browsers (likeChrome) automatically fix incorrect encodings, sodepending on what browser you use, you may not see this problem. You should still set an encoding of `utf-8` on your page anywayto avoid any potential problems in other browsers.
112
+
> **Note:** Some browsers (likeChrome) automatically fix incorrect encodings, sodepending on what browser you use, you may not see this problem. You should still set an encoding of `utf-8` on your page anywayto avoid any potential problems in other browsers.
113
113
114
114
### Active learning: Experiment with character encoding
115
115
@@ -250,7 +250,7 @@ Just about all websites you'll use in the modern day will employ {{glossary("CSS
250
250
2. Open the HTML file in both your browser, and your text editor.
251
251
3. By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.
252
252
253
-
If done correctly, when you save your HTML and refresh your browser you should be able tosee that things have changed:
253
+
If done correctly, when you save your HTML and refresh your browser you should be able tosee that things have changed:
254
254
255
255

256
256
@@ -279,7 +279,7 @@ These codes are defined by the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639
279
279
280
280
## Summary
281
281
282
-
That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking atHTML text fundamentals.
282
+
That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking atHTML text fundamentals.
0 commit comments