Uzanto:JaviRamosLab/Citado kaj lingvoj en HTML

Blockquote kaj lingvoj ĉe HTML

Mi apenaŭ vidas klarigojn en esperanto pri citado, lingvoj kaj similaj HTML temoj. Tiu ĉi estas miaj bazaj notoj sed apenaŭ ordigo aŭ klarigo, sed eble utilaj por ontaj esploroj de aliaj aŭ mi mem.

Ĉe vikicitaro nun (en 2021) mi trovis iom da laboro jam ĉe la ŝablono Citaĵo [1]

<cite style="font-style:normal;">

—

<a href="https://eo.wikisource.org/wiki/A%C5%ADtoro:Henryk_Sienkiewicz" title="Aŭtoro:Henryk Sienkiewicz">Henryk Sienkiewicz</a>
, 
<i>
<a href="https://eo.wikisource.org/wiki/La_ju%C4%9Do_de_Oziris" title="La juĝo de Oziris">La juĝo de Oziris</a>
</i>
</cite>

Se vi rimarkas oni uzas kaj title="…" kio estas bona kialo por daŭrigi tiun laboron kaj aldoni pliajn HTML-kodojn.

Mi klopodos verki iomete pri miaj spertoj kaj esploroj pri la jenaj temoj:

<blockquote>
<q>
<cite>
<poem>

atributoj kaj CCS

lang="eo"

translate

:lang()

<blockquote>

Por vikicitaro blockquote certe estas la plej grava ero uzebla. Ĝin oni uzas por enmeti citaĵojn! Bedaŭrinde la retumiloj kiel mozilla, chrome ka. aldonas defaŭltan stilon (iom da ĝisrandigo) tiel ke ĝi aspektas malsame al normala teksto. oni povas eviti tion per propra CCS aŭ pere de tuta forigo de la retumilan stiligon vokante CCS. Konkretaj proponoj pro VikiCitaro estas aldoni ĝin al la ŝablono Citaĵo kun la atributo lang="eo"

<blockquote lang="eo"> ....la citaĵo...</blockquote>

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

Fonto:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

HTML kodo globalvoices.org

<blockquote>Original Text</blockquote>
<blockquote class="translation">Translated Text</blockquote>

Mi devas trovi la CCS uzata por class="translation" kiu kreas belan skatolon kun ambaŭ lingvoj.

ili ankaŭ uzas

<blockquote class="twitter-tweet">

ĉe la retumilo ili videbliĝas tiel:

HTML kodo tab para blockquote ĉe globalvoices

<div class="translation-tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="translation-tabs-0"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"><li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="translation-tab-0" aria-labelledby="ui-id-1" aria-selected="true"><a href="#translation-tab-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Traduko</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="original-tab-0" aria-labelledby="ui-id-2" aria-selected="false"><a href="#original-tab-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Origina citaĵo</a></li></ul><blockquote class="translation ui-tabs-panel ui-widget-content ui-corner-bottom" id="translation-tab-0" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;"><p>Mia seĝo estas malgrandega</p></blockquote><blockquote id="original-tab-0" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"><p>My chair is very small</p></blockquote></div>

ĉe aliaj retejoj mi trovis

<blockquote>
<p>
...
</p></blockquote>

<blockquote cite="http://ekzemplo.com/">
  <p>……....</p>
</blockquote>
<p>— Aŭtoro</p>

HTML kodo ĉe wikimedia.org

<blockquote class="wp-block-quote is-style-large">
<p>......teksto......</p>
<cite>– Jimmy Wales </cite>
</blockquote>

laŭ mi estas erare uzata tie!

HTML kodo twitter

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="cs" dir="ltr"><a href="https://twitter.com/ELiberaScio?ref_src=twsrc%5Etfw">@ELiberaScio</a> petos aliĝon kiel Faka Asocio Kunlaboranta de <a href="https://twitter.com/UEAViva?ref_src=twsrc%5Etfw">@UEAViva</a> kaj Faka Sekcio de <a href="https://twitter.com/tejoesperanto?ref_src=twsrc%5Etfw">@tejoesperanto</a>. La traktado komenciĝos baldaŭ kaj, se ĉio iros glate, ni estos akceptitaj ene de kelketaj monatoj. Ho, jes! 😎 <a href="https://t.co/jBhdqPzD55">pic.twitter.com/jBhdqPzD55</a></p>— Esperanto LiberaScio (@ELiberaScio) <a href="https://twitter.com/ELiberaScio/status/1370993097325342722?ref_src=twsrc%5Etfw">March 14, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Aŭtoroj

La plej granda manko ĉe HTML estas por AŬTORO de la citaĵoj kaj neniu norma solvo ekzistas, vi vidos amasegon da proponoj. Interalie mi vidis:

<small class="author">Napoleon Bonaparte<small>

HTML 5 documentation says, "Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements."

Bootstrap 4

<blockquote class="blockquote">
  <p>In the digital age, knowledge is our lifeblood. And documents are the DNA of knowledge.</p>
  <footer class="blockquote-footer">Rick Thoman, CEO, <cite title="Xerox Corporation">Xerox</cite></footer>
</blockquote>

Twitter

<blockquote class="twitter-tweet" data-twitter-extracted-i162792488409698566="true">
<p dir="ltr" lang="es">
…
</p>
<p>
— Aŭtoro 
</p>
</blockquote>

Mozilla dev

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

<q>

estas por enlinia (inline) citado. Tute ne uzinda ĉe VikiCitaro sed ja ĝi estas iu citformo.

<cite>

<figure>
    <blockquote>
        <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    </blockquote>
    <figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>

Fonto:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

CITE ĉe vikifontaro kie ĝi multe gravas!

<cite style="font-style:normal;">
—
<a href="https://eo.wikisource.org/wiki/A%C5%ADtoro:Henryk_Sienkiewicz" title="Aŭtoro:Henryk Sienkiewicz">Henryk Sienkiewicz</a>
, 
<i>
<a href="https://eo.wikisource.org/wiki/La_ju%C4%9Do_de_Oziris" title="La juĝo de Oziris">La juĝo de Oziris</a>
</i>
</cite>

<poem>

Teorie oni povus uzi ĝin ĉe VikiCitaro sed plej provable ĝi ne estas necesa. Mi nur vidas ĝin en la itala vikicitaro. <poem></poem> https://it.wikiquote.org/wiki/Wikiquote:Modello_di_voce#Formattazione

Lang

la tribute lang estas tre grava kaj preskaŭ mistero ĉe esperantujo, mi neniam legis ion ajn pri ĝi en Esperanto. Ĉiukaze ĝi estas uzenda ĉe maldamaj lokoj ekde la kapo, ligiloj ĝis simplaj paragrafoj ĝi aplikeblas al kiu ajn teksto.

plenkape/patre

<html lang="eo">

ĉe parágrafo

<p lang="en">This paragraph is written in english.</p>

ĉe ligilo

<a lang="eo" href="https://ekzemplo.com/alternativa-paĝo" />ekzemplo</a>

Teorie ĉe kiu ajn teksto!

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<html lang="fr">

<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

<a lang="es" href="qa-html-language-declarations.es">Español</a>

use un elemento como span o div alrededor del contenido

<p>Usted diría eso en chino como <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>

Especificación de metadatos acerca del idioma de la audiencia Content-Language: en, hi, pa

no es posible declarar el idioma del texto usando CSS.

El DOCTYPE del ejemplo que aparece a continuación contiene el texto EN, lo cual significa 'inglés'. Esto, no obstante, indica el idioma del esquema asociado con este documento, no tiene nada que ver con el idioma del documento mismo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

una codificación de caracteres no permite la identificación inequívoca de un idioma natural… la codificación de caracteres puede variar en un solo idioma, por ejemplo el árabe podría usar codificaciones como 'Windows-1256' o 'ISO-8859-6' o 'UTF-8'.

Fonto:

https://www.w3.org/International/questions/qa-html-language-declarations.es

hreflang

hreflang pri kio mi tute ne spertas sed ĝi estas uzata por plurlingvaj retejoj, ĝi montras alternativan alilingvaj ligilon.

<link rel="alternate" hreflang="eo" href="https://ekzemplo.com/alternativa-paĝo" />

ekz:

<link rel="alternate" hreflang="it" href="https://ejemplo.com/ciao" />

<link rel="alternate" hreflang="de" href="https://ejemplo.com/hallo" />

Atributo translate

En vikicitaro ĝi multege utilus ĉe la devenlingvaj tekstoj tiel ke tradukiloj (kiel google traslate, yandex ka.) lasu ilin senĉanĝoj!

<span translate="no">translate</span>

<cite translate="no">How Far Can You Go?</cite>

class="notranslate"

toda una página que no debería ser traducida, puede agregar <meta name="google" value="notranslate"> dentro del elemento head de su página y Google no traducirá ningún contenido en esa página. (Sin embargo, también apoya <meta name="google" content="notranslate">.)

Fonto:

https://www.w3.org/International/questions/qa-translate-flag

<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>

Fonto:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

:lang()

Por CCS uzado, atentu ke ĝi ne deklaras lingvon de iu ajn teksto ĝi nur modifas la stilon de iu teksto surbaze de ties lingvo. Ekzemple kiajn citilojn uzi kio multe varias laŭ lingvoj.

/* Selects any <p> in English (en) */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

Fonto:

https://developer.mozilla.org/en-US/docs/Web/CSS/:lang

+

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ El atributo lang y su importancia en accesibilidad HTML

El valor del atributo lang se rige por el documento BCP47 de la IETF y debe ser una cadena que contenga un identificador de idioma según el estándar ISO 639

BCP47

https://tools.ietf.org/html/bcp47

ISO 639

https://www.loc.gov/standards/iso639-2/php/code_list.php

<!doctype html>
<html lang="es">
....
<body>
    <p>Esta página esta escrita en español.</p>
    <p lang="en">But this paragraph is written in english.</p>
    <p>Customizar, del inglés <span lang="en">customize</span>, que significa personalizar.</p>
</body>
</html>

Entre las muchas razones, algunas de las que creo más importantes son:

1 Asistentes de navegación

el atributo lang es recomendando en las guías de accesibilidad de la W3C. http://www.w3.org/TR/WCAG20-TECHS/H58.html

2 Selección de tipografía

3 Traductores y correctores ortográficos

4 Implicaciones en CSS y renderizado de texto

5 Posibles implicaciones en SEO

/* General para todos los elementos q */

q:before { content: open-quote; }
q:after { content: close-quote; }

/* Inglés */

:lang(en) q { quotes: '“' '”'; }

/* Francés */

:lang(fr) q { quotes: '«' '»'; }

/* Alemán */

:lang(de) q { quotes: '»' '«'; }

Fonto:

https://cybmeta.com/el-atributo-lang-en-html

https://tutorialesenlinea.es/2739-el-atributo-lang_hreflang-y-su-importancia-en-accesibilidad.html

https://www.w3.org/International/questions/qa-lang-why

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Citado kaj citiloj

citiloj ( ‘ ’ ); ( “ ” ); ( „ ” ); ( « » )

Li diris: "Mi venos.".
Li diris: "Mi venos".
Li diris: "Mi venos."

‘citaĵo’ “citaĵo” „citaĵo” «citaĵo»
Germanio inverse: »citaĵo«

“ ” Citiloj
Jen kelkaj alternativaj formoj: “citaĵo”, "citaĵo", „citaĵo”, «citaĵo», »citaĵo«, ‘citaĵo’

Fonto:
http://bertilow.com/pmeg/skribo_elparolo/skribo/helposignoj.html
http://www.esperanto.be/fel/mon/mon_konv.php#inter

Pri „esperantlingvaj” kaj aliaj citiloj
http://www.ipernity.com/blog/paul_peeraerts/4617856
https://web.archive.org/web/20200202091317/http://www.ipernity.com/blog/paul_peeraerts/4617856

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Ĝeneralaj fontoj

<cite> ne konfuziĝu kun
cite — <blockquote>, <del>, <ins>, <q>

+ Attributes defined elsewhere

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information )
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )

These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks.

This example formats an excerpt from "The Two Towers", by J.R.R. Tolkien, as a blockquote.

<BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html">
<P>They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.</P>
</BLOCKQUOTE>

The following example illustrates nested quotations with the Q element.

John said, <Q lang="en-us">I saw Lucy at lunch, she told me <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

=

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

https://www.w3.org/TR/html4/struct/text.html#h-9.2.2

+

<blockquote 
Mi ne estas spertulo pri HTML sed jen kelkaj interesaj aldonendaj informoj/kodoj.
attribute lang
lang="eo"
|lingvo=
por {{lingvo|}} kaj por [[Kategorio:Citaĵoj el la angla lingvo]]
|CDLT=dato
por steligi + bildo kun alt={{CDLT}} kaj link=[[Vikicitaro:Citaĵo de la tago]]

+

<blockquote 
<p></p>
<cite>Verko</cite>

+ por la alilingvaj citaĵoj aldonendas la atributo

translate="no"

+ ligiloj
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

HTML5

<a hreflang>
<cite>
<details>

http://www.html5rocks.com/