Fix typos (ChartsCSS#44)

ramiy · web-flow · commit fd2e59c94389 · 2023-10-08T10:12:56.000+03:00
diff --git a/src/charts/area.md b/src/charts/area.md
@@ -67,7 +67,7 @@ Add a [heading](../components/heading/) to your chart using the `<caption>` tag.
 
 ## Data
 
-To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unit-less numbers, between `0` to `1`.
+To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unitless numbers, between `0` to `1`.
 
 ```html{2}
 <tr>
@@ -83,7 +83,7 @@ Use the `--start` and `--end` variables to set the data. While `--end` is equiva
 </tr>
 ```
 
-To help the framwork identify the text, wrap the content with a `<span class="data">` tag.
+To help the framework identify the text, wrap the content with a `<span class="data">` tag.
 
 ```html{2}
 <tr>
@@ -148,7 +148,7 @@ To help the framwork identify the text, wrap the content with a `<span class="da
 </tr>
 ```
 
-As any other data item, they should have the relevalt structure.
+As any other data item, they should have the relevant structure.
 
 ```html{2-4}
 <tr>
@@ -660,7 +660,7 @@ Data axes are auto-generated based on the amount of columns (`<tr>` tags) in the
 
 ## Orientation
 
-Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LRT and RTL languages) and right-to-left (on TTM languages).
+Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LTR and RTL languages) and right-to-left (on TTM languages).
 
 ### Reverse
 
diff --git a/src/charts/bar.md b/src/charts/bar.md
@@ -68,7 +68,7 @@ Add a [heading](../components/heading/) to your chart using the `<caption>` tag.
 
 ## Data
 
-To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unit-less numbers, between `0` to `1`.
+To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unitless numbers, between `0` to `1`.
 
 ```html{2}
 <tr>
@@ -84,7 +84,7 @@ Use the `--size` variable to set the data.
 </tr>
 ```
 
-To help the framwork identify the text, wrap the content with a `<span class="data">` tag.
+To help the framework identify the text, wrap the content with a `<span class="data">` tag.
 
 ```html{2}
 <tr>
@@ -149,7 +149,7 @@ To help the framwork identify the text, wrap the content with a `<span class="da
 </tr>
 ```
 
-As any other data item, they should have the relevalt structure.
+As any other data item, they should have the relevant structure.
 
 ```html{2-4}
 <tr>
@@ -925,7 +925,7 @@ To add space between data items use the `.datasets-spacing-*` class.
 
 ## Orientation
 
-Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LRT and RTL languages) and right-to-left (on TTM languages).
+Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LTR and RTL languages) and right-to-left (on TTM languages).
 
 ### Reverse
 
diff --git a/src/charts/column.md b/src/charts/column.md
@@ -67,7 +67,7 @@ Add a [heading](../components/heading/) to your chart using the `<caption>` tag.
 
 ## Data
 
-To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unit-less numbers, between `0` to `1`.
+To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unitless numbers, between `0` to `1`.
 
 ```html{2}
 <tr>
@@ -83,7 +83,7 @@ Use the `--size` variable to set the data.
 </tr>
 ```
 
-To help the framwork identify the text, wrap the content with a `<span class="data">` tag.
+To help the framework identify the text, wrap the content with a `<span class="data">` tag.
 
 ```html{2}
 <tr>
@@ -148,7 +148,7 @@ To help the framwork identify the text, wrap the content with a `<span class="da
 </tr>
 ```
 
-As any other data item, they should have the relevalt structure.
+As any other data item, they should have the relevant structure.
 
 ```html{2-4}
 <tr>
@@ -924,7 +924,7 @@ To add space between data items use the `.datasets-spacing-*` class.
 
 ## Orientation
 
-Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LRT and RTL languages) and right-to-left (on TTM languages).
+Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LTR and RTL languages) and right-to-left (on TTM languages).
 
 ### Reverse
 
diff --git a/src/charts/line.md b/src/charts/line.md
@@ -67,7 +67,7 @@ Add a [heading](../components/heading/) to your chart using the `<caption>` tag.
 
 ## Data
 
-To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unit-less numbers, between `0` to `1`.
+To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unitless numbers, between `0` to `1`.
 
 ```html{2}
 <tr>
@@ -83,7 +83,7 @@ Use the `--start` and `--end` variables to set the data. While `--end` is equiva
 </tr>
 ```
 
-To help the framwork identify the text, wrap the content with a `<span class="data">` tag.
+To help the framework identify the text, wrap the content with a `<span class="data">` tag.
 
 ```html{2}
 <tr>
@@ -155,7 +155,7 @@ To help the framwork identify the text, wrap the content with a `<span class="da
 </tr>
 ```
 
-As any other data item, they should have the relevalt structure.
+As any other data item, they should have the relevant structure.
 
 ```html{2-4}
 <tr>
@@ -691,7 +691,7 @@ Data axes are auto-generated based on the amount of columns (`<tr>` tags) in the
 
 ## Orientation
 
-Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LRT and RTL languages) and right-to-left (on TTM languages).
+Control the [chart orientation](../components/orientation/), or direction. The initial orientation is top-to-bottom (on LTR and RTL languages) and right-to-left (on TTM languages).
 
 ### Reverse
 
diff --git a/src/charts/pie.md b/src/charts/pie.md
@@ -67,7 +67,7 @@ Add a [heading](../components/heading/) to your chart using the `<caption>` tag.
 
 ## Data
 
-To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unit-less numbers, between `0` to `1`.
+To transform HTML tables into charts, you need to provide [data](../components/data/). The chart requires unitless numbers, between `0` to `1`.
 
 ```html{2}
 <tr>
@@ -83,7 +83,7 @@ Use the `--start` and `--end` variables to set the data. While `--end` is equiva
 </tr>
 ```
 
-To help the framwork identify the text, wrap the content with a `<span class="data">` tag.
+To help the framework identify the text, wrap the content with a `<span class="data">` tag.
 
 ```html{2}
 <tr>
diff --git a/src/components/axes.md b/src/components/axes.md
@@ -12,9 +12,9 @@ The axis system is a separate component and contains several parts. **By default
 
 ### Naming Conventions
 
-One of the frameworks philosophical guidelines is to use direction-free class names. This way it can support all languages out-of-the-box, including left-to-right (LTR), right-to-left (RTL) and top-to-bottom (TTB) languages.
+One of the framework's philosophical guidelines is to use direction-free class names. This way it can support all languages out-of-the-box, including left-to-right (LTR), right-to-left (RTL) and top-to-bottom (TTB) languages.
 
-Class like `.show-x-axes` and `.show-y-axes` were deprecated early-on in favor of `.show-primary-axis`, `.show-*-secondary-axes` and `.show-data-axes`. 
+Class like `.show-x-axes` and `.show-y-axes` were deprecated early-on in favor of `.show-primary-axis`, `.show-*-secondary-axes` and `.show-data-axes`.
 
 ### Supported Axes
 
@@ -28,7 +28,7 @@ The **Charts.css** axis system supports 3 types of axes:
 
 The primary axis separates the labels from the data. To display the primary axis use the `.show-primary-axis` class.
 
-Note that in a bar chart the primary axis is horizontal, while in a column chart it is vertical. If this changes the label's position (before of after), the primary axis will change its position too.
+Note that in a bar chart the primary axis is horizontal, while in a column chart it is vertical. If this changes the label's position (before or after), the primary axis will change its position too.
 
 ```html
 <table class="charts-css bar show-labels show-primary-axis">
@@ -250,7 +250,7 @@ To customize the primary axis use the following CSS variables:
 
 ## Add Secondary Axes
 
-While the primary axis located between the labels and the data, the secondary axes located behind the chart data. The number of displayed axes can be controled using the `.show-*-secondary-axes` class. Replace the `*` in the class name, with any number `1`-`10`. For example, to display 4 secondary axes use the `.show-4-secondary-axes` class.
+While the primary axis is located between the labels and the data, the secondary axes are located behind the chart data. The number of displayed axes can be controlled using the `.show-*-secondary-axes` class. Replace the `*` in the class name, with any number `1`-`10`. For example, to display 4 secondary axes use the `.show-4-secondary-axes` class.
 
 ```html
 <table class="charts-css bar show-labels show-4-secondary-axes">
diff --git a/src/components/colors.md b/src/components/colors.md
@@ -8,11 +8,11 @@ Chart colors help users distinguish between data items and datasets.
 
 ## Color System
 
-The default color system consist of ten repeating colors. With the help of CSS variables you can override the default colors to create custom themes. More advanced users may choose to create entirely new color systems based on unique design requirements.
+The default color system consists of ten repeating colors. With the help of CSS variables you can override the default colors to create custom themes. More advanced users may choose to create entirely new color systems based on unique design requirements.
 
 ### Default Colors
 
-The **Charts.css** color system consist of the following 10 colors:
+The **Charts.css** color system consists of the following 10 colors:
 
 <ul class="charts-css legend legend-rectangle" style="border: 0; padding: 0; padding-inline-start: 2rem">
   <li> rgba(240 50 50 / 75%) </li>
@@ -124,7 +124,7 @@ The most basic way to change colors is to use the `--color` variable, applying i
 
 ## Change Specific Colors
 
-To change specific element color, we need to apply the `--color` variable on a specific `<td>` tag. This way the inheritance rules only apply to that element. 
+To change the color of a specific element, we need to apply the `--color` variable on a specific `<td>` tag. This way the inheritance rules only apply to that element.
 
 ```html{3}
 <tr>
@@ -212,7 +212,7 @@ To change specific element color, we need to apply the `--color` variable on a s
 </template>
 </code-example>
 
-This method can be also be applied to all the `<td>` elements one by one.
+This method can also be applied to all the `<td>` elements one by one.
 
 ```html{3,7,11}
 <tr>
@@ -305,7 +305,7 @@ This method can be also be applied to all the `<td>` elements one by one.
 </template>
 </code-example>
 
-**Note:** With small data tables it's acceptable to override colors for each `<td>` element but with large tables it's a not recommended. Keep reading to learn how to [change global colors](#change-global-colors).
+**Note:** With small data tables it's acceptable to override colors for each `<td>` element but with large tables it's not recommended. Keep reading to learn how to [change global colors](#change-global-colors).
 
 ## Change Global Colors
 
diff --git a/src/components/data.md b/src/components/data.md
@@ -140,7 +140,7 @@ Raw data without a visual representation has no meaning. As visual frameworks do
 </template>
 </code-example>
 
-**Note:** The `--size` property can be manually changed for each data item. But the values have to be unit-less numbers, between `0` to `1`. This way all chart types are covered as we multiply size value by `100%` or by `360deg` (depending on the chart type).
+**Note:** The `--size` property can be manually changed for each data item. But the values have to be unitless numbers, between `0` to `1`. This way all chart types are covered as we multiply size value by `100%` or by `360deg` (depending on the chart type).
 
 ## Raw data is not really required
 
@@ -280,7 +280,7 @@ The example above presents a significant problem. The solution is to add data to
 
 ## Show Data on Hover
 
-Another good practice is to hide the data, and show it when visitors are hover over it. This is done using the `.show-data-on-hover` class.
+Another good practice is to hide the data, and show it only when hovering over it. This is done by wrapping the data with `<span class="data">` tag and applying `.show-data-on-hover` class to the wrapper.
 
 ```html{1,7,10,13,16,19}
 <table class="charts-css column show-data-on-hover">
@@ -415,6 +415,6 @@ Some chart types require not only the `--size` variable but also the `--start` v
 
 ## Size Variable 
 
-All `--size` variables should always be a unit-less number between `0` to `1`. Why unit-less? Because you should be able to change chart types without changing the unit in all your variables.
+All `--size` variables should always be a unitless number between `0` to `1`. Why unitless? Because you should be able to change chart types without changing the unit in all your variables.
 
 Rectangular charts use percentage as a unit of measurement while radial charts use degrees. To make it easier for users to switch between chart types, the framework deprecated units. Instead, it multiplies the `--size` by `100%` or by `360deg` depending on the chart type.
diff --git a/src/components/labels.md b/src/components/labels.md
@@ -489,7 +489,7 @@ Lastly, play with the label text alignment. Use the following classes:
 * `labels-align-inline-center`
 * `labels-align-inline-end`
 
-The alignment class use logical properties naming conventions to keep the chart flow-relative based on the page writing directions.
+The alignment class uses logical properties naming conventions to keep the chart flow-relative based on the page writing directions.
 
 ```html{1,13}
 <table class="charts-css column multiple show-labels labels-align-inline-start">
diff --git a/src/components/legend.md b/src/components/legend.md
@@ -9,9 +9,9 @@ Chart legends display the labels of the datasets as they appear in the chart.
 
 ## Legend Structure
 
-The legend is a separate component with a separate HTML tag. You have the freedom to position the legend wherever you want. Just like any other HTML tag. 
+The legend is a separate component with a separate HTML tag. You have the freedom to position the legend wherever you want. Just like any other HTML tag.
 
-Note that currently legends required to use of `<ul>` with `<li>` or `<ol>` with `<li>` tags. In future versions, you will have the freedom to use any HTML tag.
+Note that currently legends require the use of `<ul>` with `<li>` or `<ol>` with `<li>` tags. In future versions, you will have the freedom to use any HTML tag.
 
 ## Legend Position
 
@@ -109,7 +109,7 @@ Use the `.legend` class to style your chart legend.
 
 ## Legend Orientation
 
-By default, legend dataset labels are vertically aligned and positioned beside the chart. To aligning legend dataset labels horizontally, use the `.legend-inline` class. This is usually used to position the legend above or below the chart.
+By default, legend dataset labels are vertically aligned and positioned beside the chart. To align legend dataset labels horizontally, use the `.legend-inline` class. This is usually used to position the legend above or below the chart.
 
 ```html
 <ul class="charts-css legend legend-inline">
@@ -657,7 +657,7 @@ Use the `.legend-line` class to display a line shaped label.
 
 Change any aspect of the legend element using CSS. Simply target the CSS selector and apply your own style.
 
-For example, lets change the text color, the background color and add a box-shadow:
+For example, let's change the text color, the background color and add a box-shadow:
 
 ```css
 .legend {
diff --git a/src/components/orientation.md b/src/components/orientation.md
@@ -8,11 +8,11 @@ The orientation sets the direction of the chart components without changing the
 
 ## Orientation System
 
-The orientation system is a core functionality which help you reorder chart elements with simple CSS utility classes.
+The orientation system is a core functionality which helps you reorder chart elements with simple CSS utility classes.
 
 ### Reordering Elements
 
-Generally speaking, **Charts.css** doesn't deal with data - it only styles the data by positioning different HTML element.
+Generally speaking, **Charts.css** doesn't deal with data - it only styles the data by positioning different HTML elements.
 
 To reorder elements you can simply change the HTML table structure. However, with large datasets it requires a lot of manual work. In these cases, **Charts.css** offers CSS utility classes that change the elements order without changing the HTML markup.
 
@@ -351,7 +351,7 @@ Area chart with a regular orientation and a reverse orientation:
 
 ## Reverse Labels
 
-Labels positioned along the chart primary axis. The primary axis depends on the page writing direction and whether the chart orientation is reversed on not.
+Labels positioned along the chart primary axis. The primary axis depends on the page writing direction and whether the chart orientation is reversed or not.
 
 Charts with reversed labels position the label where the data ends, rather where the data starts.
 
@@ -971,7 +971,7 @@ Area chart with a combination of reversed orientation and reversed labels:
 
 ### Population Pyramid Chart
 
-With the help of `.reverse-labels` class, it's now possible to create a "Population Pyramid Chart" (also known as "Age Structure Diagram"). By combining two bar charts with reversed labels side by side, one with regular the other with reversed orientation, you can get beautifull pyramid chart.
+With the help of `.reverse-labels` class, it's now possible to create a "Population Pyramid Chart" (also known as "Age Structure Diagram"). By combining two bar charts with reversed labels side by side, one with regular and the other with reversed orientation, you can get a beautiful pyramid chart.
 
 ```html
 <div id="population-pyramid-chart">
@@ -1131,7 +1131,7 @@ With the help of `.reverse-labels` class, it's now possible to create a "Populat
 </template>
 </code-example>
 
-To make it even more informative, each age group can be splitted to sub categories and display as [stacked chart](./stacked/).
+To make it even more informative, each age group can be splitted to sub categories and displayed as a [stacked chart](./stacked/).
 
 <code-example code-example-id="orientation-example-20">
 <template v-slot:css-code>
diff --git a/src/components/stacked.md b/src/components/stacked.md
@@ -18,7 +18,7 @@ There are two types of stacked charts:
 
 ## Using Stacked Charts
 
-By definition, stacked view can be applied only on multiple datasets (with `.multiple` class). A single dataset has nothing to stack.
+By definition, stacked views can be applied only on multiple datasets (with `.multiple` class). A single dataset has nothing to stack.
 
 To display a stacked view simply use the `.stacked` class.
 
@@ -30,7 +30,7 @@ To display a stacked view simply use the `.stacked` class.
 
 ## Stacked Bars
 
-Stack items side-by-side using `.bar` chart.
+Stack items side-by-side using a `.bar` chart.
 
 ```html
 <table class="charts-css bar multiple stacked">
@@ -178,7 +178,7 @@ Stack items side-by-side using `.bar` chart.
 
 ## Stacked Columns
 
-Stack items atop one another using `.column` chart.
+Stack items atop one another using a `.column` chart.
 
 ```html
 <table class="charts-css column multiple stacked">
diff --git a/src/components/tooltips.md b/src/components/tooltips.md
@@ -25,7 +25,7 @@ Simple data `<table>` with only the data:
 
 ### Data With Tooltips
 
-To add tooltips, simply add a `<span>` tag with a `.tooltip` class. 
+To add tooltips, simply add a `<span>` tag with a `.tooltip` class.
 
 ```html{5}
 <tr>
@@ -36,7 +36,7 @@ To add tooltips, simply add a `<span>` tag with a `.tooltip` class.
 </tr>
 ```
 
-Add tooltips to specific data as in the example above, or to all your data elements as shown bellow.
+Add tooltips to specific data as in the example above, or to all your data elements as shown below.
 
 ```html{3-5}
 <tr>
diff --git a/src/customization/3d-effects.md b/src/customization/3d-effects.md
@@ -91,7 +91,7 @@ To create 3D bars is pretty simple. It can be done using the CSS `box-shadow` pr
 </template>
 </code-example>
 
-Or by using `:before` and `:after` psedo-elements combined with the CSS `skew()` transformation:
+Or by using `:before` and `:after` pseudo-elements combined with the CSS `skew()` transformation:
 
 ```css
 #custom-effect .column .column tbody td {
diff --git a/src/customization/README.md b/src/customization/README.md
diff --git a/src/customization/basic-styling.md b/src/customization/basic-styling.md
diff --git a/src/development/README.md b/src/development/README.md
diff --git a/src/development/design-principles.md b/src/development/design-principles.md
diff --git a/src/docs/README.md b/src/docs/README.md
diff --git a/src/docs/usage.md b/src/docs/usage.md
