CSSJanus 项目教程

CSSJanus 项目教程

node-cssjanus↔️ Convert CSS between left-to-right and right-to-left. Mirror of https://gerrit.wikimedia.org/g/mediawiki/libs/node-cssjanus/. Contribute via https://www.mediawiki.org/wiki/Developer_account.项目地址:https://gitcode.com/gh_mirrors/no/node-cssjanus

项目介绍

CSSJanus 是一个开源项目，用于在左到右（LTR）和右到左（RTL）之间转换 CSS 样式表。该项目由 Wikimedia 基金会维护，旨在帮助开发者处理多语言和多方向的网页布局。CSSJanus 支持多种编程语言的实现，包括 JavaScript 和 PHP。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过 npm 安装 CSSJanus：

npm install cssjanus

使用示例

以下是一个简单的使用示例，展示如何将 CSS 从 LTR 转换为 RTL：

const cssjanus = require('cssjanus');

const inputCss = `
  .example {
    margin-left: 10px;
    float: left;
  }
`;

const outputCss = cssjanus.transform(inputCss);

console.log(outputCss);

输出将会是：

.example {
  margin-right: 10px;
  float: right;
}

应用案例和最佳实践

应用案例

• Wikimedia Foundation: CSSJanus 被用于 MediaWiki 和 VisualEditor，支持 Wikipedia 和其他免费知识项目的多语言界面。
• WordPress: 用于 wp-admin 界面和默认年度主题的多语言支持。

最佳实践

• 使用逻辑属性: 推荐使用 margin-inline-start 而不是 margin-left，这样浏览器会根据内容方向自动调整。
• 配置全局方向: 在项目初始化时配置全局 CSS 方向，以确保一致性。

典型生态项目

• Gulp: gulp-cssjanus
• PostCSS: postcss-cssjanus
• styled-components: styled-components-rtl
• Stylis: stylis-plugin-rtl
• webpack: cssjanus-webpack

这些工具和插件可以帮助你在不同的构建流程中集成 CSSJanus，实现自动化的 CSS 方向转换。

node-cssjanus↔️ Convert CSS between left-to-right and right-to-left. Mirror of https://gerrit.wikimedia.org/g/mediawiki/libs/node-cssjanus/. Contribute via https://www.mediawiki.org/wiki/Developer_account.项目地址:https://gitcode.com/gh_mirrors/no/node-cssjanus