横書きと縦書きでルビの位置を変えたい（HTML/CSS/JavaScript）

https://github.com/amizushiro/NovelViewerTemplate 上記のテンプレートを利用し、自分のWebサイトで小説を公開しています。 濁点が普通つかない文字、たとえば「あ」などに濁点をつけたいです。 ruby[data-ruby]で横書きの場合は普通にできたのですが、縦書きのときはズレてしまいます。 上記のテンプレートで縦書きに変更した際に位置が変わるようにするとか、そもそもCSSなどで今は縦書きか横書きかを取得できるのか…… プログラミングについて中途半端な知識しかなく、cssをいじればいいのか、jsをいじればいいのかもすぐ考えつかず、聞いたほうが早いと思い募集させていただきました。 もちろんrubyタグの機能でなくても、同じことができれば何でもいいです。