Giters

zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.

Home Page:https://www.mdui.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Styling and Localization Issues When Changing HTML lang Attribute

fatherofinvention opened this issue · comments

commented

I've discovered unexpected behavior related to component styling and localization, specifically tied to the lang attribute on the <html> tag. The framework's components do not render correctly unless the lang attribute is set to zh-CN. Adjusting this attribute to en-US or removing it entirely causes styling issues. Also, despite the page content being in English, alert dialogues are displayed in Chinese. Note, these issues were found when using CDN.

Steps to Reproduce:

  1. Include MDUI via CDNs in an HTML document.
  2. Set the lang attribute of the <html> tag to en-US or remove the lang attribute.
  3. Observe that the MDUI components (e.g., buttons, alerts) do not retain their intended styling, specifically fonts. Also alert and dialogue text are displayed in Chinese regardless of the lang setting when English is expected.

EXAMPLE:

<!doctype html>
<html lang="en-US" class="mdui-theme-dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
  <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
  <title>Hello, world!</title>
</head>
<body>

  <mdui-button class="example-button">open</mdui-button>

  <script>
	const button = document.querySelector(".example-button");
  
	button.addEventListener("click", () => {
	  mdui.alert("Alert description", "Alert Title", () => {
		console.log("confirmed");
	  }, {
		confirmText: "OK"
	  });
	});
  </script>
  
</body>
</html>

Expected Behavior:
The components should maintain their styling regardless of the lang attribute's value, and localization settings (like alert dialogues) should correspond to the set language.

Actual Behavior:
Component styling breaks when the lang attribute is not zh-CN. Alert dialogues default to Chinese, ignoring the page's language setting.

Thank you for your support and the excellent work on MDUI.

commented

<html lang="en-US" class="mdui-theme-dark">
0W2Qu35c2024032305 41 54

<html lang="zh-CN" class="mdui-theme-dark">
ey8vcGuN2024032305 43 28

Alert in Chinese when lang is set to en-US:
IND062m52024032305 44 14

3OlSFkiQ2024032305 44 00

commented

I'll add localization language pack feature in the next version. For now, you can use the confirmText property to adjust the alert function's text. There's a mistake in your alert usage. Here's the correct way:

mdui.alert({
  headline: "Alert Title",
  description: "Alert description",
  confirmText: "OK",
  onConfirm: () => console.log("confirmed"),
});

About the styling issue you mentioned when setting the lang attribute to en-US, I couldn't reproduce it. If you can, please edit the online example to provide the reproduction code: https://jsbin.com/noxequyepa/1/edit?html,output

commented

Hi @zdhxiong , thank you for your guideance on the alert, it worked! Here is the JSBin showing the styling issue.

https://jsbin.com/fefobuwofa/edit?html,output

You'll see when lang is en or en-US the text is unstyled:
0p7u6WBw2024032306 19 29

If you change to zh or zh-CN it becomes styled:
JmfEeKH12024032306 20 40

I have confirmed this in Chrome, Arc and Firefox on MacOS.

Thank you.

commented

@fatherofinvention Because MDUI doesn't specify a default font, the browser will automatically set the appropriate default font based on the lang attribute. You can customize the font styles to your preference, for example:

body {
    font-family: -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}
commented

Thanks @zdhxiong - didn't realize this was browser behavior, good to know.