Change language html css

How to change the language of the page?

How to change the language of the page? I have in HTML file, the language will change when it changes. I’m sure that this task needs JS, but I still do not know how to use it properly. Can you help me, give the code sample or something? Please . Thanks for help, I will use Visph’s and Warith’s answers! https://code.sololearn.com/WtOMKyG9b45O/?ref=app

Your code is incomplete and not valid (even if permissivity of html makes browsers mandatory to display it «as they can» by attempting to guess how to correct it. ) : you should at least close the and tag at end of your code ^^ Anyway, your task doesn’t necessarly require JS, but that’s the less tricky way (other ways are css tips, or server side dynamic reload of page — or at least part of page, but this need also some JS). The JS user-sided ways require to watch for change, reading the selected value, and depending on wich language is selected, modify the text content (or hide unselected languages, and show the selected one). For the first part (watching for change), you need to use event listener, for the second one (reading the selected value) you need to use the ‘selectedIndex’ property of the element: http://www.egtry.com/javascript/form/event/onchange https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events https://developer.mozilla.org/en-US/docs/Web/Events/change https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex

You can copy a text from JS in your Russian language. Then paste in your

tags. It will set the default text. https://code.sololearn.com/WghmYif2CyOe/?ref=app

@visph Thanks, I have forgot about closing tags. And, you mean that I can use PHP? Can you give an example of the code, or you know where I can find it?

New question: How to reset the value to default? I mean, I have Russian and English languages, when the page loaded, Russian language are shown. Then we can change it to English(Text from JS), and then back to Russian. So I need to write English and Russian texts both (into JS). How to make that at the setted value on 1(Russian), was displayed default HTML text? I hope you’ll understand.

None «social» network account. And I protect my privacy by not publishing email address: to contact me, just hope I would be still active here, and post a comment on one of my code (if possible related to your question, else related to you), with the link to the question that you should post in Q&A (so the help I could give to you will be easier to find and could be useful for other users ^^)

@Warith I would do it if I did not have too much text (I have a lot of text) So copy-paste all of it.. That’s very hard

You could call your change() function at load time. There’s many ways to do it: + insert a somewhere in the html AFTER the closing tag defining the language selector element + insert a onload=»change()» attribute into the tag ( ) + define the ‘onload’ event listener for the window object (equivalent to the ‘onload’ attribute) anywhere in your JS code(s) + define the ‘DOMContentLoaded’ for the document object (fired more or less sooner then the onload event) anywhere in your JS codes(s) To define event listener in JS, some could be setted directly as attribute/property, others require use of addEventListener() method (wich will work for all available events — some older versions of browser could not support it, but globally that’s widely supported today, appart for IE before version 9 wich use attachEvent() method instead — events attributes as «onload», «onclick», are refered without the «on» prefix at attribute of the register method): https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Best practice would be to use addEventListener() (eventualy with test/switch to support IE<9), and since you doesn't have to wait for all linked file to the page available for the function execution (images, css, js. ) to be loaded, use of 'DOMContentLoaded' should be the less or more most efficient way: document.addEventListener('DOMContentLoaded',change); (obviously, the JS part containing the change() definition must have been previously parsed ^^)

Often have questions like this?

Learn more efficiently, for free:

Источник

Переключатель языков без плагина

Самописный код выгодно отличается от плагина тем, что не содержит в себе дополнительную нагрузку, которой перегружены все плагины, так-как они создаются для разносторонних потребностей пользователей.

Одним нужен маленький переключатель, другим большой, третьим нужен и автопереводчик с редактором, и админку, и библиотеки, вот разработчики и суют всё в одну коробочку, а до кучи ещё и рекламку и пару ссылочек и т.д., и т.п, зато бесплатно.

. blok text-align : center ;
width : 89px ;
>
. blok a text-decoration : none ;
display : block ;
transition : .5s linear ;

>
. blok ul list-style : none ;
margin : 0 ;
padding : 0 ;

>
. topmenu > li display : block ;
position : relative ;
top : 0 ;
left : 0 ;
margin-bottom : 2px ;
>
. submenu position : absolute ;
left : 0 ;
top : 0 ;
z-index : 5 ;
width : 89px ;
visibility : hidden ;
opacity : 0 ;
transform : translateY(10px) ;
transition : .5s ease-in-out ;
>
. submenu li position : relative ;
top : 0 ;
left : 0 ;
>
. submenu .submenu position : absolute ;
top : 0 ;
left : calc(100% — 1px) ;
left : -webkit-calc(100% — 1px) ;
>
. blok li:hover > .submenu visibility : visible ;
opacity : 1 ;
transform : translateY(0px) ;
>

Как видите — чистый html+css.

В темах оформления CMS, обычно задаются свойства для списков (теги li, ul, ol), поэтому, возможно, в теги li нужно будет ввести классы, и задать этим классам свои свойства позиционирования.

Картинки можно, и даже лучше, нарезать в Паинте прямо отсюда. В сервисах изображений вы ничего лучше не найдёте.

Желаю всем плодотворной работы.

Источник

Styling using language attributes

What is the most appropriate way to associate CSS styles with text in a particular language in a multilingual HTML or XML document?

Presentation styles are commonly used to control changes in fonts, font sizes and line heights when language changes occur in the document. This can be particularly useful when dealing with Simplified versus Traditional Chinese, where users tend to prefer different fonts, even though they may be using many of the same characters. It can also be useful to better harmonize the look of mixed, script-specific fonts, such as when mixing Arabic and Latin fonts.

This page looks at available options for doing this most effectively.

Quick answer

The best way to style content by language in HTML is to use the :lang selector in your CSS style sheet. For example:

The important point to be made in this section is that this would not be possible using the [lang|=». «] or [lang=». «] selectors. For those to work you would have to declare the language explicitly on each Japanese em tag.

This is a significant difference between the usefulness of these different selectors.

Which language attribute?

The lang attribute is used to identify the language of text served as HTML. Text served as XML should use the xml:lang attribute.

For XHTML that is served as text/html, it is recommended that you use both attributes, since the HTML parser will pick up on the lang attribute, whereas if you parse the content as XML the xml:lang attribute will be used by your XML parser.

The article will first discuss the various options for styling by language in HTML, using the lang attribute. There then follows a section about how to style XML documents based on xml:lang .

The :lang(. ) pseudo-class selector

could have the following styling:

body :lang(ar) :lang(zh-Hant) :lang(zh-Hans) :lang(din)

The Greek and Russian use the styling set for the body element.

This is the ideal way to style language fragments, because it is the only selector that can apply styling to the content of an element when the language of that content is declared earlier in a page.

A rule for :lang(zh) would match elements with a language value of zh . It would also match more specific language specifications such as zh-Hant , zh-Hans and zh-TW .

The selector :lang(zh-Hant) will only match elements that have a language value of zh-Hant or have inherited that language value. If the CSS rule specified :lang(zh-TW) , the rule would not match our sample paragraph.

A [lang|=». «] selector that matches the beginning of a value of an attribute

For markup example we saw in the previous section, the style sheet could be written as:

body *[lang|="ar"] *[lang|="zh-Hant"] *[lang|="zh-Hans"] *[lang|="din"]

Unlike :lang , this selector will only work for elements which carry a lang attribute (see Inheritance of language values).

There is a significant difference between this selector and [lang=». «] . Whereas [lang=». «] will only match elements when the selector value and the attribute value are identical, this selector value will match a language attribute value that has additional hyphen-separated values. Therefore the selector [lang|=»sl»] would match sl-IT , sl-nedis or sl-IT-nedis , and the selector [lang|=»zh-Hans»] would also match zh-Hans-CN .

Generic class or id selectors

This method avoids the need to match the language declarations at all, and relies on class or id attribute markup. Using an ordinary CSS class or id selector works with most browsers that support CSS. The disadvantage is that adding the attributes takes up time and bandwidth.

For the markup example above, this would require us to change the HTML code by adding class attributes as follows:

We could then have the following styling:

Using CSS selectors in XML with xml:lang

As mentioned earlier, in a document that is parsed as XML you need to use the xml:lang attribute (rather than the lang attribute) to express language information.

Use of :lang is straightforward. If the document is parsed as HTML, the :lang selector will match content where the language was defined using a lang attribute value. However, if the document is parsed as XML, the :lang selector will match content labeled with an xml:lang attribute value and ignore any lang attribute value.

Using attr= and attr|=

Use of these selectors involves some additional considerations.

The xml: part of the xml:lang attribute indicates that this is the lang attribute used in the XML namespace. CSS3 Namespaces describes how to handle xml:lang as an attribute in a namespace. Basically you need to declare the namespace and then replace the colon with a vertical bar. For example:

@namespace xml "http://www.w3.org/XML/1998/namespace" *[xml|lang |= 'ar']

@namespace xml "http://www.w3.org/XML/1998/namespace" *[xml|lang = 'ar']

Any @namespace rules must follow all @charset and @import rules and precede all other non-ignored at-rules and rule sets in a style sheet. Note, also, that the URI for the namespace declaration must be exactly correct.

For browsers that are not namespace aware, you can fall back to escaped characters. For this you need no @namespace declaration, just one of the following:

Note, however, that if you try to use this approach with a namespace-aware browser (ie. most recent, major browsers), it will not work, so if you feel it is needed, you should use this approach in addition to the namespace-based selectors.

By the way

I have used the language codes zh-Hant and zh-Hans . These language codes do not represent specific languages. zh-Hant would indicate Chinese written in Traditional Chinese script. Similarly zh-Hans represents Chinese written in Simplified Chinese script. This could refer to Mandarin or many other Chinese languages.

Until recently the codes zh-TW and zh-CN were used to indicate Traditional and Simplified versions of Chinese writing, respectively. In reality, zh-TW should indicate Chinese spoken in Taiwan, although there is more than one Chinese language spoken in Taiwan. Similarly zh-CN represents Chinese spoken in China (PRC). This could refer to Mandarin or any other Chinese language.

If you need to use language tags to differentiate between Chinese languages, the IANA language subtag registry has more precise language codes for a range of Chinese languages. For more information see Language tags in HTML and XML.

Further reading

• Getting started? Language on the Web http://www.w3.org/International/getting-started/language
• Language tags in HTML and XML
• Related links, Authoring HTML & CSS
  • Styling & layout
  • Styling by language

  Источник