Vocabulary: RTL/LTR Language Support for BreadCrumb Component

[Audiosutras]

Description

When viewing a right to left language, the breadcrumb component's arrows should "flip" there direction. Currently the breadcrumb arrows only point right. When right to left language is being shown these arrows should point left .

Reproduction

1. On a parent element of the breadcrumb component, add the dir attribute
2. Toggle dir attribute between dir="ltr" and dir="rtl"

Screenshots

Left to Right

Right to Left

Please ignore See the Deed in the second screenshot. I'm currently working on rtl support and wanted to stop to make sure that this issue was created.

Additional context

The below PR is adding rtl/ltr support for the new licenses pages:

https://github.com/creativecommons/cc-licenses/pull/22

[zackkrida]

Here's some more styles to fix the breadcrumbs. I will make this code part of vocabulary eventually and let you all know when. I'd suggest adding these styles to your project directly until then.

html[dir="rtl"] nav.breadcrumb>ul li+li:before {
    transform: rotate(180deg);
}

html[dir="rtl"] .breadcrumb li:first-child a {
    padding-right: 0;
    padding-left: .5rem;
}

[dhruvkb]

Just to add on to @zackkrida's excellent workaround, I would recommend using

transform: scaleX(-1);

instead of rotate as that would work for icons that have a vertical directionality (like external-link).