| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/ruby-position | [Back] [Original] |
Get to know MDN better
Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.
ruby-positionDepuis dcembre 2024, cette fonctionnalit fonctionne sur les appareils et les versions de navigateur les plus rcents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.
La proprit CSS ruby-position dfinit la position d'un lment ruby par rapport son lment de base. L'lment ruby peut ainsi tre positionn au-dessus de l'lment (over), en-dessous (under) ou entre les caractres, sur leur droite (inter-character).
ruby-position: over;
ruby-position: under;
<section id="default-example">
<ruby id="example-element"> <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>
#example-element {
font-size: 2em;
}
/* Valeurs avec un mot-cl */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;
/* Valeurs globales */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;
Cette proprit est dfinie comme l'un des mots-cls suivants :
over
[Exemple au-dessus]
Est un mot-cl indiquant que le ruby doit tre plac au-dessus du texte principal pour les scripts horizontaux et droite pour les scripts verticaux.
under
[Exemple en-dessous]
Est un mot-cl indiquant que le ruby doit tre plac sous le texte principal pour les scripts horizontaux et gauche pour les scripts verticaux.
alternate Est un mot-cl indiquant que le ruby alterne entre au-dessus et en-dessous, lorsqu'il y a plusieurs niveaux d'annotation.
inter-characterLorsqu'il est dfini, il se comporte comme over dans les modes d'criture verticale. Sinon, il indique que le ruby doit tre plac entre les diffrents caractres, apparaissant droite de la base dans le texte horizontal et forant les enfants du conteneur d'annotation ruby avoir un mode d'criture vertical-rl.
| Valeur initiale | alternate |
|---|---|
| Applicabilit | annotations ruby des conteneurs |
| Hrite | oui |
| Valeur calcule | comme dfini |
| Type d'animation | discrte |
ruby-position =Cette syntaxe reflte le dernier standard selon CSS Ruby Annotation Layout Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.
[ alternate || [ over | under ] ] |
inter-character
<ruby>
<rb></rb>
<rp></rp><rt></rt><rp></rp>
</ruby>
ruby {
ruby-position: over;
}
<ruby>
<rb></rb>
<rp></rp><rt></rt><rp></rp>
</ruby>
ruby {
ruby-position: under;
}
<ruby>
<rb>A</rb><rb>B</rb><rb>C</rb>
<rtc>Above</rtc>
<rtc>Below</rtc>
</ruby>
ruby {
ruby-position: alternate; /* ceci est galement la valeur initiale */
}
| Spcification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # rubypos |
<ruby>, <rt>, <rp> et <rtc>ruby-alignCette page a t modifie le 5 aot 2026 par les contributeurices du MDN.
-webkit-border-before-webkit-box-reflect-webkit-mask-box-image-webkit-mask-composite-webkit-mask-position-x-webkit-mask-position-y-webkit-mask-repeat-x-webkit-mask-repeat-y-webkit-tap-highlight-color-webkit-text-fill-color-webkit-text-security-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-touch-calloutProprits personnalises (--*) : variables CSSaccent-coloralignment-baselineallanchor-nameanchor-scopeanimationappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaseline-shiftbaseline-sourceblock-sizeborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-shapeborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthborderbottomcaption-sidecaretclearclip-pathclip-ruleclipcolorcolumnscontaincontainer-namecontainer-typecontainercontent-visibilitycontentcorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shapecorner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfill-opacityfill-rulefillfilterflexfloatflood-colorflood-opacityfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-palettefont-sizefont-size-adjustfont-smoothfont-stretchfont-stylefont-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightfont-widthfontforced-color-adjustframe-sizinggapgridhanging-punctuationheighthyphenate-characterhyphenate-limit-charshyphensinitial-letterinline-sizeinsetinteractivityinterpolate-sizeisolationleftletter-spacinglighting-colorlink-parametersmarginmarkermaskmix-blend-modeoffsetopacityorderorphansoutlineoverflowoverlaypaddingpagepaint-orderpath-lengthperspective-originperspectivepointer-eventspositionprint-color-adjustquotesrreading-flowreading-orderresizerightrotaterulerxryscalescroll-behaviorscroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-marker-groupscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-target-groupscroll-timelinescroll-timeline-axisscroll-timeline-namespeak-asstop-colorstop-opacitystroketab-sizetable-layouttext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-styletimeline-scopetoptouch-actiontransformtransitiontranslateunicode-bidiuser-modifyuser-selectvector-effectvertical-alignvisibilitywhite-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingwriting-modexyz-indexzoom:active-view-transition:active-view-transition-type():active:any-link:autofill:blank:buffering:checked:current:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:first:focus-visible:focus-within:focus:fullscreen:future:has-slotted:has():heading:heading():host-context():host:host():hover:in-range:indeterminate:interest-source:interest-target:invalid:is():lang():last-child:last-of-type:left:link:local-link:modal:muted:not():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:right:root:scope:seeking:stalled:state():target:user-invalid:user-valid:valid:visited:volume-locked:where():xr-overlay::-webkit-inner-spin-button::-webkit-meter-bar::-webkit-meter-even-less-good-value::-webkit-meter-inner-element::-webkit-meter-optimum-value::-webkit-meter-suboptimum-value::-webkit-progress-bar::-webkit-progress-inner-element::-webkit-progress-value::-webkit-scrollbar::-webkit-search-cancel-button::-webkit-search-results-button::-webkit-slider-runnable-track::-webkit-slider-thumb::after::backdrop::before::checkmark::column::cue::details-content::file-selector-button::first-letter::first-line::grammar-error::highlight()::marker::part()::picker-icon::picker()::placeholder::search-text::selection::slotted()::spelling-error::target-text@charset@color-profile@container@counter-style@custom-media@document@font-face@font-feature-values@font-palette-values@function@import@keyframes@layer@media-moz-device-pixel-ratio-webkit-animation-webkit-device-pixel-ratio-webkit-transform-2d-webkit-transform-3d-webkit-transitionany-hoverany-pointeraspect-ratiocolorcolor-gamutcolor-indexdevice-aspect-ratiodevice-heightdevice-posturedevice-widthdisplay-modedynamic-rangeforced-colorsgridheighthorizontal-viewport-segmentshoverinverted-colorsmonochromeorientationoverflow-blockoverflow-inlinepointerprefers-color-schemeprefers-contrastprefers-reduced-dataprefers-reduced-motionprefers-reduced-transparencyresolutionscanscriptingshapeupdatevertical-viewport-segmentsvideo-dynamic-rangewidth@namespace@page@position-try@property@scope@starting-style@supports@view-transition<absolute-size><alpha-value><angle-percentage><angle><axis><baseline-position><basic-shape><blend-mode><box-edge><calc-keyword><calc-sum><color-interpolation-method><color><content-distribution><content-position><corner-shape-value><custom-ident><dashed-function><dashed-ident><dimension><display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside><easing-function><filter-function><flex><frequency-percentage><frequency><generic-family><gradient><hex-color><hue-interpolation-method><hue><ident><image><integer><length-percentage><length><line-style><line-width><named-color><number><overflow-position><overflow><percentage><position-area><position><ratio><relative-size><resolution><rule-list><self-position><shape><string><system-color><text-edge><time-percentage><time><timeline-range-name><transform-function><url>-moz-image-rect()abs()acos()alpha()anchor-size()anchor()asin()atan()atan2()attr()blur()brightness()calc-size()calc()circle()clamp()color-mix()color()conic-gradient()contrast-color()contrast()cos()counter()counters()cross-fade()cubic-bezier()device-cmyk()drop-shadow()dynamic-range-limit-mix()element()ellipse()env()exp()fit-content()grayscale()hsl()hue-rotate()hwb()hypot()if()image-set()image()inset()invert()lab()lch()light-dark()linear-gradient()linear()log()matrix()matrix3d()max()min()minmax()mod()oklab()oklch()opacity()paint()param()path()perspective()polygon()pow()progress()radial-gradient()random()ray()rect()rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient()rgb()rotate()rotate3d()rotateX()rotateY()rotateZ()round()saturate()scale()scale3d()scaleX()scaleY()scaleZ()sepia()shape()sibling-count()sibling-index()sign()sin()skew()skewX()skewY()sqrt()steps()superellipse()symbols()tan()translate()translate3d()translateX()translateY()translateZ()type()url()var()xywh()Certaines parties de ce contenu sont protges par le droit d'auteur 19982026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.
| Web Proxy Viewer | New URL | Original Page |