Skip to content

Commit

Permalink
Update for NPM......
Browse files Browse the repository at this point in the history
  • Loading branch information
@DellZHackintosh
DellZHackintosh committed Apr 24, 2023
1 parent 6acafc5 commit 997d5ad
Show file tree
Hide file tree
Showing 7 changed files with 40 additions and 29 deletions.
24 changes: 15 additions & 9 deletions README-EN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Like Twemoji, this project can also replace the emoji on the web page with an im
Include the following in your HTML <head></head> :

```
<script src="https://cdn.jsdelivr.net/gh/DellZHackintosh/[email protected].1/src/script/msemoji.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/DellZHackintosh/[email protected].2/src/script/msemoji.min.js" crossorigin="anonymous"></script>
```

Then <body></body> add these in:
Expand Down Expand Up @@ -70,7 +70,9 @@ msemoji.parse(document.body,{
base: string,
ext: string,
className: string,
folder: string
folder: string,
high_contrast: boolean,
version: string
});
```

Expand All @@ -94,13 +96,13 @@ Note: What you see now is some of the parameters supported by the script, which

This repository provides five emoji formats to choose from, and you can choose the right format for your website according to the actual situation.

| Variant style | 2D | 3D | Flat | Color | High Contrast |
|:--------------------------------:|:-------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| Example Appearance | ![](./src/2D/1f600.png) | ![](./src/3D/1f600.png) | ![](./src/Flat/1f600.svg) | ![](./src/Color/1f600.svg) | ![](./src/High%20Contrast/1f600.svg) |
| The corresponding `ext` value | `.png` | `.png` | `.svg` | `.svg` | `.svg` |
| The corresponding `folder` value | `2D` | `3D` | `Flat` | `Color` | `High Contrast` |
| Features | The size is `72x72` pixels. Not scalable. | The size is `256x256`, which is clearer, more three-dimensional and lively than `2D` Scalable. Same style as `2D`, smaller size. | Scalable. Same style as `2D`, small size. | Scalable. Same style as `3D`. | Scalable. Suitable for people with disabilities or those who want to display emoji in black and white font. |
| Pros | Good compatibility, low performance consumption, fast loading. | Good compatibility, less performance consumption, larger resolution, less blurry. | Be clear in any situation. Fast loading. | Be clear in any situation. | Actively small size. Make it easier for people with disabilities to read. |
| Variant style | 2D | 3D | Flat | Color | High Contrast |
|:--------------------------------:|:-------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| Example Appearance | ![](./src/2D/1f600.png) | ![](./src/3D/1f600.png) | ![](./src/Flat/1f600.svg) | ![](./src/Color/1f600.svg) | ![](./src/High%20Contrast/1f600.svg) |
| The corresponding `ext` value | `.png` | `.png` | `.svg` | `.svg` | `.svg` |
| The corresponding `folder` value | `2D` | `3D` | `Flat` | `Color` | `High Contrast` |
| Features | The size is `72x72` pixels. Not scalable. | The size is `256x256`, which is clearer, more three-dimensional and lively than `2D` Scalable. Same style as `2D`, smaller size. | Scalable. Same style as `2D`, small size. | Scalable. Same style as `3D`. | Scalable. Suitable for people with disabilities or those who want to display emoji in black and white font. |
| Pros | Good compatibility, low performance consumption, fast loading. | Good compatibility, less performance consumption, larger resolution, less blurry. | Be clear in any situation. Fast loading. | Be clear in any situation. | Actively small size. Make it easier for people with disabilities to read. |
| Cons | Not scalable. Blurry on high-resolution screens or when viewed at larger sizes. | Not scalable. May be blurry when viewed in high resolution screens or at larger sizes. Larger than `2D` may slow down loading. | Slightly weaker compatibility. Heavy usage may slightly affect performance. | Limited by special bitmap rasterization, it may be problematic to display or scale on some devices, and is not as detailed as `3D` style. Larger than `Flat` may slow down loading. Heavy usage can affect performance. | The currently provided `high_contrast` parameter implements a slight issue with the functionality that emoji for some skin tone variants does not display correctly (Weird transcoding logic...), and there is no good solution yet. Avoid using emoji with a non-default skin tone in this style. |

### ✨Adjust the display of Emoji
Expand Down Expand Up @@ -164,6 +166,10 @@ Here are some ideas although you can do in other ways.

2. Use JavaScript.

### 🆕NPM Support

[msemoji](https://www.npmjs.com/package/msemoji) now available on NPM.

## 🤔FAQ

#### Why can't some emojis be displayed?
Expand Down
Loading

0 comments on commit 997d5ad

Please sign in to comment.