Skip to content

Commit a9831cc

Browse files
realanthonycrealanthonyc
committed
v3.2.7
1 parent 792c5f2 commit a9831cc

4 files changed

Lines changed: 43 additions & 168 deletions

File tree

‎README.md‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,52 @@
1-
# Reading Time Counter v3.2.6
1+
# Read Time Counter
22

3-
A ***simple and robust*** reading time counter that **accurately** counts words, characters, and images in your content. It calculates the estimated reading time for English, CKJ (Chinese, Korean, Japanese), and other Latin-based languages by combining text reading and image viewing times.
4-
5-
> ⚠️ **This repo will not be further updated. The project will continue to be maintained at:** [https://github.com/SPACESODA/readtimecounter](https://github.com/SPACESODA/readtimecounter)
3+
Read Time Counter is a ***simple and robust*** reading time counter that **accurately** counts words, characters, and images in your content. It calculates the estimated reading time for English, CKJ (Chinese, Korean, Japanese), and other Latin-based languages by combining text reading and image viewing times.
64

75
<br>
86

97
## How to use?
108

11-
### The script:
9+
There are three ways to include the script:
1210

13-
Simply include the script `readtime.js` in your page’s **footer** code (before `</body>`) and you’re set. For example, add the following to your webpage:
11+
### 1. Directly embed the script
1412

1513
```html
16-
<script defer src="readtime.js"></script>
14+
<script>
15+
// Paste the code of readtime.js here
16+
</script>
1717
```
1818

19-
You can also use the CDN version via jsDelivr:
19+
### 2. Host and link your own .js file
20+
21+
Include the script on your page, ideally inside the `<head>` tag with the `defer` attribute so it runs after the HTML is parsed.
2022

2123
```html
22-
<script defer src="https://cdn.jsdelivr.net/gh/hypestudiox/readtimecounter/readtime.min.js"></script>
24+
<script defer src="readtime.js"></script>
2325
```
2426

25-
### Define the area for the counting the Read Time:
27+
### 3. Use the CDN
2628

27-
Wrap your article content in a container with the attribute `id="readtimearea"`.
28-
29-
**Limitation:** Only one `readtimearea` per webpage is supported.
30-
31-
### Outputs:
29+
```html
30+
<script defer src="https://cdn.jsdelivr.net/gh/SPACESODA/readtimecounter/readtime.min.js"></script>
31+
```
3232

33-
Display the estimated reading time (in minutes) by adding an element with the `id="readtime"`.
33+
<br>
3434

35-
For example: `<span id="readtime"></span>`
35+
## Define the area
3636

37-
The script also outputs individual counts for:
37+
Wrap your article content in an element with the attribute `id="readtimearea"`.
3838

39-
• **Words:** Displayed in an element with `id="wordCount"`.
39+
**Note:** Only one `readtimearea` is supported per page.
4040

41-
• **CKJ Characters:** Displayed in an element with `id="ckjCount"`.
41+
## Output elements
4242

43-
• **Images:** Displayed in an element with `id="imgCount"`.
43+
Display the estimated reading time (in minutes) by adding an element with the `id="readtime"`. For example: `<span id="readtime"></span>`
4444

45-
• **Combined Info:** For a summary view, use an element with `id="hybridCount"`.
45+
The script also outputs individual counts for:
46+
• **Words:** Displayed in an element with `id="wordCount"`.
47+
• **CKJ Characters:** Displayed in an element with `id="ckjCount"`.
48+
• **Images:** Displayed in an element with `id="imgCount"`.
49+
• **Combined Info:** For displaying a summary, use `id="hybridCount"`.
4650

4751
Example:
4852

@@ -64,26 +68,25 @@ Example:
6468
You can override default reading speed and time format by:
6569

6670
```html
67-
<script defer src="https://cdn.jsdelivr.net/gh/hypestudiox/readtimecounter/readtime.min.js"></script>
71+
<script defer src="https://cdn.jsdelivr.net/gh/SPACESODA/readtimecounter/readtime.min.js"></script>
6872
<script>
6973
window.readingTimeSettings = {
70-
engSpeed: 220,
71-
charSpeed: 300,
72-
imgSpeed: 10,
73-
timeFormat: "integer"
74+
engSpeed: 225, // words per minute for English and Latin-based languages
75+
charSpeed: 300, // characters per minute for CKJ
76+
imgSpeed: 10, // seconds per image
77+
timeFormat: "integer" // "decimal" or "integer"
7478
};
7579
</script>
7680
```
7781

7882
<br>
7983

80-
## Live Example
84+
## Live Example on CodePen
8185

82-
See it on CodePen: https://codepen.io/pen/EaxyZzG
86+
Visit: https://codepen.io/pen/EaxyZzG
8387

8488
📣 **Please feel free to comment, contribute and make the code better!**
8589

86-
8790
<br>
8891

8992
---

‎readtime.js‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
/**
2-
* Reading Time Counter v3.2.6
3-
* https://github.com/hypestudiox/readtimecounter
2+
* Read Time Counter v3.2.7
3+
* https://github.com/SPACESODA/readtimecounter
44
*/
5+
56
(function () {
6-
// Default settings (can be overridden via window.readingTimeSettings)
7+
// Default settings
78
const defaults = {
89
engSpeed: 230, // words per minute for English and Latin-based languages
9-
charSpeed: 285, // CKJ characters per minute
10+
charSpeed: 285, // characters per minute for CKJ
1011
imgSpeed: 8, // seconds per image
1112
timeFormat: "decimal" // "decimal" or "integer"
1213
};
13-
14-
// Merge defaults with user overrides (if provided)
1514
const settings = Object.assign(
1615
{},
1716
defaults,
@@ -51,44 +50,36 @@
5150
return "";
5251
}
5352
let rawText = walkNodes(element);
54-
return rawText
55-
.replace(/\s+/g, " ") // Collapse multiple spaces into one
56-
.trim(); // Remove leading/trailing spaces
53+
// Normalize whitespace and trim
54+
return rawText.replace(/\s+/g, " ").trim();
5755
}
5856

5957
function updateDisplay(element) {
6058
let text = getReadableText(element);
6159
let engCount = countWords(text, false);
6260
let ckjCount = countWords(text, true);
6361
let imgCount = countImages(element);
64-
6562
let engTime = engCount / settings.engSpeed;
6663
let ckjTime = ckjCount / settings.charSpeed;
6764
let imgTime = (imgCount * settings.imgSpeed) / 60;
6865
let totalReadingTime = engTime + ckjTime + imgTime;
69-
7066
// Format time based on settings.timeFormat
71-
let roundedTime = Math.round(totalReadingTime * 10) / 10; // Base calculation to 1 decimal
67+
let roundedTime = Math.round(totalReadingTime * 10) / 10;
7268
let displayTime;
7369
if (settings.timeFormat === "integer") {
7470
displayTime = Math.round(totalReadingTime); // Round to nearest integer
7571
} else {
76-
displayTime = roundedTime; // Keep 1 decimal place (default)
72+
displayTime = roundedTime; // Keep 1 decimal place
7773
}
78-
displayTime = displayTime === 0 ? "0" : displayTime; // Ensure 0 for empty content
79-
74+
displayTime = displayTime === 0 ? "0" : displayTime; // 0 for empty content
8075
const readTimeElement = document.getElementById("readtime");
8176
if (readTimeElement) readTimeElement.textContent = `${displayTime}`;
82-
8377
const wordCountElement = document.getElementById("wordCount");
8478
if (wordCountElement) wordCountElement.textContent = engCount;
85-
8679
const ckjCountElement = document.getElementById("ckjCount");
8780
if (ckjCountElement) ckjCountElement.textContent = ckjCount;
88-
8981
const imgCountElement = document.getElementById("imgCount");
9082
if (imgCountElement) imgCountElement.textContent = imgCount;
91-
9283
const hybridCountElement = document.getElementById("hybridCount");
9384
if (hybridCountElement) {
9485
let infoParts = [];
@@ -107,7 +98,6 @@
10798
if (!readtimeArea) {
10899
return; // Silently exit if no readtimearea
109100
}
110-
111101
if (
112102
["INPUT", "TEXTAREA"].includes(readtimeArea.tagName) ||
113103
readtimeArea.isContentEditable
@@ -122,7 +112,6 @@
122112
characterData: true
123113
});
124114
}
125-
126115
updateDisplay(readtimeArea);
127116
});
128117
})();

‎v1/readtime.js‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎v2/readtime.js‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

0 commit comments

Comments
 (0)